无法使用 CSS 模块更改 React Bootstrap 的规则

Question

我正在尝试更改 react-bootstrap 列表组项的背景颜色。

我的 example.js 文件

import {classes} from "./Sidebar.module.css";
import ListGroup from "react-bootstrap/ListGroup";
import React from "react"; 
const Sidebar = () => {
    return (
        <div>
            <ListGroup>
                <ListGroup.Item className = {classes.Color} >Products</ListGroup.Item>
                <ListGroup.Item>Stores</ListGroup.Item>
            </ListGroup>
        </div>
    )
}

Sidebar.module.css 文件有

.Color{
    background-color: red;

即使给定了自定义类名，背景颜色仍然是默认颜色。

Answer 1

如果您想更改默认颜色，请使用 !important。当您从 Sidebar.module.css 加载样式时，还要删除花括号。像这样

import classes from './Sidebar.module.css';

.Color {
   background-color: red !important; 
}