基本类名在新的 React 应用程序中不起作用

Question

刚刚使用“npx create-react-app my-app”创建了一个新的反应应用程序（因此为我配置了 webpack 和所有模块）并且我的 classNames 都没有被实现。 万一我做错了，我尝试复制和粘贴基本的，比如 react-bootstrap 中的导航栏示例。

它显示导航栏的文本，但没有显示样式。 任何人都遇到过这个问题或知道可能是什么问题？

import React from 'react';
import ReactDOM from 'react-dom';
import { Container, Nav, Navbar } from 'react-bootstrap';

function App() {
  return (
    <Container>
       <Navbar bg="dark" variant="dark">
          <Nav className="mr-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
      </Navbar>
      <>
       <div className="d-flex flex-row">
         <div className="p-2">Flex item 1</div>
         <div className="p-2">Flex item 2</div>
         <div className="p-2">Flex item 3</div>
       </div>
      </>
    </Container>
  );
}

export default App;

Answer 1

你安装了 react-bootstrap 吗？ 如果不只是输入

npm install react-bootstrap

然后它将安装所有必需的文件。

Answer 2

使用这些组件需要一些样式表。 所以你应该定义它如下。

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';