React Boostrap 4 css模块未应用于Navbar

Question

我在尝试更改导航栏的颜色时遇到问题。。我是不是少了一步？

这是我试图呈现的组件：

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);
}

这是我在包.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…时被应用

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();

Answer 1

您正在将css文件导入样式，但与导出函数、对象等的js模块不同，您的css文件不导出这些东西。你需要从导入中删除样式，只需像这个一样导入css文件

import './MainMenu.module.css';

在你的类名中简单地提到你的类名

<Navbar className="mainBar">

运行良好