Блог

Главная - Вопросы по программированию - Невозможно переопределить стиль класса модуля CSS более конкретным

Невозможно переопределить стиль класса модуля CSS более конкретным

#javascript #reactjs

Вопрос:

У меня возникла проблема с применением модуля CSS к компоненту React (в приложении, созданном с помощью «create-react-app» и с использованием webpack). У меня есть элемент, который имеет атрибут «Имя класса» и «идентификатор». Стиль «Имя класса» применяется, но когда я пытаюсь «переопределить» его более конкретным стилем «идентификатор», это не срабатывает. Мой вариант использования заключается в том, что более конкретное переопределение стиля находится в отдельном файле, но проблема существует с двумя стилями в одном файле CSS.

Вот мой компонент:

 import React from 'react';
import styles from './styles.module.css'

class QuestionTag extends React.Component {

  render() {

    let c1 = "qumultiline";

    return (
      <>
        <div className={`${styles[c1]}`} id={`${c1}`}>      
          Hello there    
        </div>
      </>
    );    

  }

}

export default QuestionTag;

Вот как визуализируется элемент:

 <div class="styles_qumultiline__iXUv1" id="qumultiline">Hello there</div>

Вот styles.module.css:

 .qumultiline {
  background-color: #006699;
  color: white;
}

div#qumultiline {
  background-color: red;
  color: red;
}

Есть ли что-то особенное, что мне нужно сделать, чтобы переопределить «Имя класса»?

Комментарии:

1. Должно ли это быть id={ ${c1} } ? Или даже просто id={c1} ?

2. вы также используете пользовательский интерфейс Material, так не следует ли вам использовать useStyles крючок?

3. @RichardHpaI упростил, удалив материал-пользовательский интерфейс

4. Есть ли причина, по которой вы не добавляете идентификатор так же, как вы добавляете свой класс? т. е. вы не говорите id={ ${стили[c1]} }

5. @RichardHpa, потому что значение » id » — это строка, а не стиль…? Не уверен, что назначение стиля «идентификатору» имеет какой-либо смысл.

Метки: