Каскадные стили в модуле React CSS

Question

В моем приложении React я испортил комбинацию встроенных JS стилей и CSS классов. Я решил разбить все на CSS модули, которые я могу использовать следующим образом:

import styles from './ImageTextOption.module.css'

И использовать их как JS объекты. Однако теперь стили не каскадируются из родительских элементов (которые не определены в том же модуле). У меня было что-то вроде .selected .option-text, и хотя у меня есть класс selected снаружи, потому что option-text превратился в уникальное имя, оно не соответствует option-text внутри selected элемента. Каков правильный подход, чтобы снова сопоставить его, используя CSS модули.

Answer 1

Я столкнулся с той же проблемой, и иногда мне было проще передавать стили в качестве подпорки вашим дочерним компонентам. Это хороший пример, если вы повторно используете дочерний компонент в разных местах.

Здесь - пример, который выполняет то же самое.

Конечно, если дочерний компонент специфицируется c для родительского компонента и используется только один раз, или если комбинация родитель-потомок специфицируется c друг для друга, тогда, возможно, будет подход для них просто разделить импорт css на родительский уровень, затем передайте его ребенку через className='

Answer 2

изменить оператор импорта на:

import './ << "PathTo Css" >>'