如何使用 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 {...}

这里我如何仅引用 Child 组件而不传递 ClassName，例如，或者不导入 ChildComponent 的 SASS 文件以获取对组件类的引用。

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

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

Answer 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 > *{
  
}