1

我在尝试更改导航栏颜色时遇到问题。我是否缺少任何步骤？

这是我要渲染的组件：

import React from 'react';
import { Nav, Navbar } from 'react-bootstrap';
import styles from './MainMenu.module.css';

const Topbar = () => {
    return(
        <Navbar className={styles.mainBar}>
          <Navbar.Brand>Restaurant</Navbar.Brand>
          <Nav.Link>Menu</Nav.Link>
        </Navbar>
    );
}

export default Topbar;

这是 CSS 模块

.mainBar{
    background-color: rgb(255, 153, 0);
}

这是我对项目的 package.json 中的依赖项：

"dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^4.6.0",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.1",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  }

当我导入 index.js 时，bootstrap 正在被应用...

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();
4

1 回答 1

0

您正在将 css 文件导入样式，但与导出函数、对象等的 js 模块不同，您的 css 文件不会导出此类内容。您需要从导入中删除样式，然后像这样导入您的 css 文件

import './MainMenu.module.css';

在您的 className 中只需提及您的班级名称

<Navbar className="mainBar">

它工作正常

于 2021-06-04T05:00:16.887 回答