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

Question

我正在使用带有 SASS 和 CSS 模块的 React。如何在不传递新 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，或者不导入 ChildComponent 的 SASS 文件以获取对组件类的引用。

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

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

Answer 1

对此有多种方法，有或没有缺点。

将每个孩子包裹在一个 div 中

第一个是将每个子组件包装在 a 中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 子组合器

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

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

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

或者如果你不知道 Child 是由什么组成的

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