Всем привет. Пытаюсь понять как работаю css модули для вложеных компонентов. Как задать стили для Li компонента внтри Ul компонента. Вот код: https://codesandbox.io/s/nifty-smoke-59nlc Я хочу поменять цвет третьего Li на красный, как это сделать через Ul компонент?
1 ответ
Если делать именно так как вы хотите, то можно сделать следующим образом: Создать функцию в Ul.js которая в зависимости от номера будет присваивать класс с цветом, что то вроде того:
let testNum = num => {
return num === 3 ? 'active' : 'normal';
}
const Ul = props => {
const lis = props.items.map(item => <Li cl={testNum(item)} />);
return <div className={style.container}>{lis}</div>;
};
После добавте в Li.module.css код для них
.normal {
background: #eee;
}
.active {
background: red;
}
И в самом Li.js присваивайте этот класс
const Li = props => {
return <div className={`${style.li} ${style[props.cl]}`}>Li</div>;
};
Я точно не знаю что у вас за приложение, но если третий номер это просто стилизация никак не связанная с логикой, то можно сделать значитеьно проще - добавить изменения только в Li.module.css
.li:nth-child(3) {
background: red;
}
Это немного идёт в разрез с идеалогией реакта, но всё зависит от вашего проекта. В целом решения грубые, но с этим уже можно работать.
-
Как вам такое решение? codesandbox.io/s/thirsty-wildflower-t00cd Просто суть была именно из модуля ul css добавить стилей какому-то из детей.– tarthur12 сен 2019 в 17:32
-
Данный код тоже работает, но нарушается немного идеалогия реакта, как бы props должен скорее определять правила компонента, а не передавать их, потому что вы и там и там ипортируете Li.module.css мне кажется это не совсем корректно, к тому же, когда вы не передаёте props, но вызвываете его в компоненте, то у вас в классе появляется undefined, что вообще никак не хорошо. И в присвоении класса "плюс" ставить не нужно– Repet13 сен 2019 в 8:11