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

Question

我将 React 与 SASS 和 CSS 模块一起使用。 如何在不传递新的 ClassName 或类似的东西的情况下设置子组件的样式。 对于前。

我想 position 或在子组件上做一些 styles ，而不必给出特定的 class ，就像当你做p span时一样，例如，所有的 span 都想做一些样式和子组件父组件中的子组件。 但是随着 class 的编译，我不知道如何引用那些孩子。

//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 文件以获取对组件 class 的引用。

//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 作为道具传递

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

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

Answer 2

自定义属性 (--*)：如果您可以控制这些子组件，则可以选择 CSS 变量。

首先，使用 CSS 变量定义子样式，例如

.some-selector {
  /* '--custom-var-name' is the css variable name, while 'white' is the default value */ 
  background-color: var(--custom-var-name, 'white');
}

然后在任何级别的父组件中定义--custom-var-name 。

<Parent style={{ '--custom-var-name': 'black' }}>
  <Child />
</Parent>

或者

<GrandParent style={{ '--custom-var-name': 'black' }}>
  <Parent>
    <Child />
  </Parent>
</GrandParent>