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

有多种方法可以实现这一点，有或没有缺点。

将每个孩子包裹在一个 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子组合器

在您的父样式表中，您可以使用直接子选择器 https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator >选择任何直接子项。您还可以将此运算符与星号运算符结合使用，但要小心使用此运算符，因为如果在页面上频繁使用，它可能会减慢浏览器的速度

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

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

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

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