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

Question

我正在使用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 {...}

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

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

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

Answer 1

对此有多种方法，有无缺点。

将每个孩子围成一个div

第一个方法是将每个子组件包装在$string = 'apple banana cinemon pokemon'; $arr = explode(' ', $string); array_walk($arr, function (&$item, $key) { $item = $key+1 . '.) ' . $item; }); $output = implode("\n", $arr); 中，然后在其上添加一个类，然后可以在样式表中引用该类：

div

通过className作为道具

您可以将类名称作为props传递，然后将此props添加到您希望在Child组件中使用的任何标签。另一方面，您必须为要创建类的每个组件执行此操作。

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

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

使用CSS子组合器

在父样式表中，您可以使用the direct children selector //ChildComponent.js Import Styles from 'ChildComponent.scss'; ... export default ({ className }) => <div className={`${Styles.child className}`}></div> 选择任何直接子代。您也可以将此运算符与star运算符结合使用，但请谨慎使用，因为如果经常在页面上使用它会降低浏览器的速度

如果我们假设您所有的Child子元素都是>：

div

或者如果您不知道孩子是由什么制成的

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

}