Question

我有一个<Parent />组件，其中包含一个<Child />：

<Parent>
    <Child />
</Parent>

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

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

<Child />有一个className道具并使用classnames package来应用该课程，如下所示：

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

但是你看到<Child />有一个名为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属性覆盖子组件中的任何类似属性？

Answer 1

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

多选择器技巧，为了扩大特异性，您可以通过复制类名来使选择器大小加倍，在这种情况下，.pill.pill { ...}将比原创，因此将覆盖样式。
使用!important ，您可以指定在父级的类中，.pill的声明最后会包含!important
多个不同的选择器，父级将传递其他不同的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));

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

2 个答案: