Работа с порядком таблицы стилей и переопределением className модуля css - PullRequest
Новая
       9

Работа с порядком таблицы стилей и переопределением className модуля css

0 голосов
/ 28 августа 2018

У меня есть компонент, который имеет свой собственный стиль, например, 

.prompt { color: red; }

Это объявлено так: 

import cn from 'classnames';
import styles from './styles.css';

const MyComponent = ({className}) => {
  return (
    <div className={cn(styles.prompt, className)}>
      test
    </div>
  );
}

В моем конкретном случае использования таблица стилей для передаваемого className фактически определена и добавлена ​​в заголовок ДО таблицы стилей из модуля, поэтому css модуля всегда переопределяет стиль передаваемого className. Что-то вроде:

enter image description here

Обратите внимание, что background: yellow из второго класса переопределяется фоном из собственного класса модуля.

Кроме использования! Важный для второго класса, как я могу обойти это?

1 Ответ

0 голосов
/ 28 августа 2018

Основываясь на ответе г-на Листера, я переоценил свои имеющиеся знания о специфике и предложил следующее решение на более высоком уровне css: 

// in app.scss
.offline.prompt {
    color: red;
}

// in app.tsx
const classes = cn(Styles.offline, Styles.prompt);
return <OfflineApp className={classes}>...</OfflineApp>;

По сути, я просто помечаю разметку модуля другим классом, чтобы повысить специфичность и нацелить необходимые свойства, используя это. ПУТЬ лучше, чем злоупотреблять! Важно.

...