#javascript #css #reactjs #css-selectors #styles
#javascript #css #reactjs #css-селекторы #стили
Вопрос:
В моем проекте у меня есть 3 простых компонента: список, таблица и элемент. Компонент item является дочерним как для компонента List, так и для компонента Table, и оба компонента List и Table отображаются, скажем, по разным маршрутам («/list» и «/ table»). Каждый компонент моего приложения react имеет модульный CSS, поэтому моя проблема в том, что, когда я запускаю компонент, я хочу внести изменения в стиль CSS компонента Item, а когда я запускаю компонент, я хочу внести некоторые другие изменения в стиль CSS компонента. Есть ли какой-либо способ добиться этого без добавления нескольких классов и использования обычных CSS-файлов или CSS-дочерних селекторов.
Комментарии:
1. Я бы настроил базовый стиль для ‘.item’, который является универсальным, затем использовал имена классов родительского компонента ‘.list.item’ и ‘.table.item’ для настройки конкретного стиля? Однако это предполагает, что вы не используете css в js.
2. Это замечательная идея, но тогда мне пришлось бы условно отображать компонент item с другим именем класса в зависимости от родительского компонента, в котором я нахожусь? или, может быть, есть какой-то другой способ сделать это?
3. Не видя больше вашего кода, я не совсем уверен, что вы имеете в виду или как структурировано ваше приложение, но, как я уже сказал, мое решение больше касается традиционного css, а не css в js. Например, у меня был бы css-файл для списка, который импортируется внутри этого компонента, который также включает стили для
.list.item, например.