Как стилизовать дочерние компоненты в React с помощью CSS-модулей - PullRequest
Новая
       22

Как стилизовать дочерние компоненты в React с помощью CSS-модулей

0 голосов
/ 07 июня 2018

Я использую React с модулями SASS и CSS.Как я могу стилизовать дочерний компонент, не передавая новое ClassName или что-то подобное.Например,

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

//ParentComponent.js
Import Styles from 'ParentComponent.scss';
Import Child from 'ChildComponent';
Import ChildB from 'ChildComponentB';
...
return(
    <div>
        <ChildB />
        <Child />
        <Child />
    </div>
);


//ParentComponent.scss (?)(?)
.child {...}

Вот как мне ссылаться только на компоненты Child, не передавая, например, ClassName или не импортируяФайл SASS ChildComponent для получения ссылки на класс компонента. 

//ChildComponent.js
Import Styles from 'ChildComponent.scss';
...
return(
    <div classNames={Styles.child}></div>
);

//ChildComponent.scss
.child {...}

1 Ответ

0 голосов
/ 10 марта 2019

Существует несколько подходов к этому, с недостатками и без них.

Оберните каждого дочернего элемента в div

Этот первый - обернуть каждый из ваших дочерних компонентов в div изатем добавьте к нему класс, который затем вы можете использовать в своей таблице стилей: 

return(
    <div>
        <div className={style.child}><ChildB /></div>
        <div className={style.child}><Child /></div>
        <div className={style.child}><Child /></div>
    </div>
);

Передайте className как реквизит

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

return(
    <div>
        <ChildB className={style.child}/>
        <Child className={style.child}/>
        <Child className={style.child}/>
    </div>
);

//ChildComponent.js
Import Styles from 'ChildComponent.scss';
...
export default ({ className }) => 
    <div className={`${Styles.child className}`}></div>

Используйте дочерний комбинатор CSS

В вашей родительской таблице стилей,Вы можете использовать прямой дочерний селектор >, чтобы выбрать любых прямых дочерних элементов.Вы также можете объединить этот оператор со звездообразным оператором, но будьте осторожны с этим оператором, поскольку он может замедлить работу браузера, если он часто используется на странице

Если мы предположим, что весь ваш дочерний компонент является div: 

/* ParentComponent.scss */
.parent > div {

}

Или, если вы не знаете, из какого ребенка сделан 

/* ParentComponent.scss */
.parent > *{

}
...