Невозможно изменить правила React Bootsrap, используя CSS Модули

Question

Я пытаюсь изменить цвет фона элемента группы реагирования- bootstrap.

Мой пример. js file

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

Если вы хотите изменить цвет по умолчанию, используйте! Также удаляйте фигурные скобки при загрузке стилей из Sidebar.module. css. Как это

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

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