javascript - 我如何将 CSS 类传递给 React 子项并确保它们将覆盖子项的本地类？

Question

我有一个 <Parent />具有单个 <Child /> 的组件:

<Parent>
    <Child />
</Parent>

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

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

<Child />有一个 className prop 并使用 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的事, 有很多方法可以确保覆盖。

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

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

3. 多个不同的选择器，父组件将传递额外的不同className，该子组件将寻址，.pill.parent-pill {.. .}， parent 将.parent-pill类传递给 child 。

这些只是覆盖子样式的 3 种简单方法，还有更多。