Question

我有一个使用create-react-app-ts创建的React应用。我为导航添加了boostrap，react-bootstrap，但是似乎没有包含bootstrap css，即，没有一个链接具有任何样式，而.js版本中却没有任何样式。除此之外，所有.TSX似乎都可以正常工作。

如果我将这些导入添加到NavMenu.tsx中，则它的样式会正确，但这似乎不是一个解决办法。

import '../../node_modules/bootstrap/dist/css/bootstrap.css'
import '../../node_modules/bootstrap/dist/css/bootstrap-theme.css'

我猜测bootstrap / react-bootstrap的某些部分未正确加载？

package.json：

{
  "name": "test-react-21w-ts3",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts-ts": "3.1.0",
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.8",
    "bootstrap": "^3.3.7",
    "react-bootstrap": "^0.31.5",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^4.2.2"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/jest": "^23.3.2",
    "@types/node": "^10.11.3",
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.8",
    "typescript": "^3.1.1"
  }

}

NavMenu.tsx：

import * as React from 'react';
import { Link } from 'react-router-dom';
import { Glyphicon, Nav, Navbar, NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
import './NavMenu.css';
export class NavMenu extends React.Component {
    displayName = NavMenu.name
    render() {
        return (
            <Navbar inverse fixedTop fluid collapseOnSelect>
                <Navbar.Header>
                    <Navbar.Brand>
                        <Link to={'/'}>TestReact21wTS4</Link>
                    </Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav>
                        <LinkContainer to={'/'} exact>
                            <NavItem>
                                <Glyphicon glyph='home' /> Home
                            </NavItem>
                        </LinkContainer>
                        <LinkContainer to={'/counter'}>
                            <NavItem>
                                <Glyphicon glyph='education' /> Counter
                            </NavItem>
                        </LinkContainer>
                        <LinkContainer to={'/fetchdata'}>
                            <NavItem>
                                <Glyphicon glyph='th-list' /> Fetch data
                            </NavItem>
                        </LinkContainer>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        );

Answer 1

将我的导入更改为此，并且可以正常工作：导入'bootstrap / dist / css / bootstrap.min.css';

应用创建了w create-react-app-ts缺少引导CSS

1 个答案: