基本類名在新的 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';