Блог

Я пытаюсь применить стиль css к определенному компоненту в React с помощью модуля css. Когда я запускаю приложение локально, стили работают правильно, но по какой-то причине, когда я развертываю свое приложение, стиль не применяется к внешнему div , только его дочерние элементы получают правильный стиль. почему это?

Ее код:

// Компонент React

 import { ChatContext } from '../../../../contexts/ChatContext';
import classes from './Humburger.module.css';
import React, { useContext } from 'react';

const Humburger = () => {

    const { show, setShow } = useContext(ChatContext);

    return (
        <div className={classes.Humburger} onClick={() => setShow(!show)}>
            <span></span>
            <span></span>
            <span></span>
        </div>
    );
};

export default Humburger;
  

// Файл CSS

  /*Here is the style which does not apply when i deploy my app*/

    .Humburger {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        width: 35px;
        height: 100%;
        margin-left: 10px;
    }

/*==========================================================*/

.Humburger > span {
    display: inline-block;
    height: 5px;
    width: 100%;
    border-radius: 5px;
    background-color: #fff;
    margin-top: 3px;
    cursor: pointer;
}

.Humburger > span:first-child {
    margin: 0;
}
  

Вы пробовали import './Humburger.module.css'; и className='Humburger' ?