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

标签 javascript css reactjs

我有一个 <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 属性覆盖子组件中的任何类似属性?

最佳答案

这是CSS specificity的事, 有很多方法可以确保覆盖。

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

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

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

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

关于javascript - 我如何将 CSS 类传递给 React 子项并确保它们将覆盖子项的本地类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46243003/

相关文章:

javascript - 查看 'SeekBar'的render方法

javascript - 如何动态传递props?

reactjs - 如何使用单元格渲染器中的按钮删除 ag-grid 行

javascript - Google 标记动画更改

javascript - 如何使用 Javascript AJAX 请求(无 jQuery)仅获取文件的一部分

javascript - 用 css 交替 div 线分隔符

javascript - 正则表达式 - 不重复句号、逗号和连字符

html - 取消悬停时过渡不会缓和

javascript - 为 iFrame 加载 GIF

javascript - 如何知道哪些数据必须通过ajax发送具体问题