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

Posted 2023-02-21

【中文标题】如何使用 CSS 模块在 React 中设置子组件的样式

【英文标题】：How to style child components in React with CSS Modules

【发布时间】：2018-11-17 16:54:19

【问题描述】：

我将 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，例如，或者不导入 ChildComponent 的 SASS 文件以获取对组件类的引用。

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

//ChildComponent.scss
.child ...

【参考方案1】：

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

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

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

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

将 className 作为 props 传递

您可以将类名作为道具传递，然后将此道具添加到您想要在子组件中的任何标记中。另一方面，您必须为每个想要拥有类的组件执行此操作。

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 子组合符

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

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

/* ParentComponent.scss */
.parent > div 
  

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

/* ParentComponent.scss */
.parent > *
  

【讨论】：

当子类名称被破坏并且您想在父类上选择特定类来覆盖其样式时，上述方法不起作用，是吗？