如何使用CSS模块在React中设置子组件的样式

Question

我正在使用React与SASS和CSS模块。如何设置子组件的样式而不传递新的ClassName或类似的东西。对于Ex。

我想在子组件上定位或做一些样式，而不必给出一个特定的类，就像你只做例如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 {...}

这里我如何仅在不传递ClassName的情况下引用Child组件，或者不引入ChildComponent的SASS文件以引用组件类。

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

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

Answer 1

这有多种方法，有缺点和没有缺点。

Wrap each child in a div

第一个是将每个子组件包装在div中，然后在其上添加一个类，然后您可以在样式表中引用它：

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

Pass the className as props

您可以将类名称作为props传递，然后将此props添加到您在Child组件中所需的任何标记。另一方面，您必须为您希望拥有类的每个组件执行此操作。

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>

Use the CSS child combinator

在父样式表中，您可以使用the direct children selector >来选择任何直接子项。您也可以将此运算符与星型运算符组合使用，但要小心这个运算符，因为如果经常在页面上使用它可能会降低浏览器的速度

如果我们假设您的所有Child组件都是div：

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

}

或者，如果你不知道Child是如何制作的

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

}