如何将CSS类传递给React子节点并确保它们将覆盖子节点的本地类？

Question

我有一个<Parent />组件，只有一个<Child /> ：

<Parent>
    <Child />
</Parent>

我想将父类的CSS类传递给<Child /> ，所以我这样做：

<Parent>
    <Child className={ styles.pill } />
</Parent>

<Child />有一个className prop，并使用classnames包应用该类，如下所示：

<div className={ classNames(styles.pill, props.className) } />

但是你看到<Child />有一个名为styles.pill的类， styles.pill具有以下样式：

.pill {
    align-content: stretch;
    align-items: center;
    color: var(--grey__text--dark);
    cursor: pointer;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
}

父传入的类包含以下样式：

.pill {
    align-items: flex-end;
    flex-flow: column wrap;
}

使用此设置，我无法保证从父项传入的样式将覆盖<Child />组件中的样式，这正是我希望它们执行的操作。 目前你永远不会知道哪一个会胜过另一个。 对于项目的每个构建来说，它似乎是随机的。

如何确保从父类传入的类中的CSS属性覆盖Child组件中的任何类似属性？

Answer 1

这是CSS特异性的问题 ，有很多方法可以确保覆盖。

1. 多选择器技巧，为了扩大特异性，你可以通过复制类名来使选择器大小加倍，在你的情况下， .pill.pill { ...}将比原来更具体，因此会覆盖样式。

2. 使用!important ，你可以指定在父类中， .pill的声明最后会包含!important 。

3. 多个不同的选择器 ，父级将传递另外的不同className ，该子组件将解析， .pill.parent-pill {...} ，父级将.parent-pill类传递给子级。

这些只是3种简单的方式来覆盖儿童风格还有更多。

Answer 2

您可以使用Object.assign将一个/多个对象合并到目标对象中，为每个后续对象提供优先级：

 const foo = { a: '1', b: '2' } const bar = { a: '3' } console.log(Object.assign(foo, bar));