css - styled-components:主题中的样式覆盖组件样式

标签 css reactjs styled-components

<分区>

Reproduction

预期:Title 的 palevioletred 颜色,TitleWithoutColor 的红色(触发主题样式)

得到:到处都是红色

原因:导致这种情况的规则如下:p.column { text-align: right; } 可以被 body p.column { text-align: left; 覆盖,让它更具体

问题:如何写主题,让组件的样式有更高的优先级?

最佳答案

react

<div id = "random_component"></div>

CSS

#random_component {
    color: #0000 !important ;
}

有时,reactjs 样式不被认为比您可能使用的框架更具体。这是因为大多数框架的样式都是用 Css 编码的。要解决此问题,请使用 Css 通过定义 classNameid 来覆盖当前框架。此外,您可以添加“!important”命令以确保否决所有其他级别的特异性。

关于css - styled-components:主题中的样式覆盖组件样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45628743/

上一篇:javascript - 如何为水平滚动列表设置滚动条样式?

下一篇:javascript - 使用 HTML 选择性地将 "tables"添加到多个选项卡 (<div>)

相关文章:

css - 有没有办法使用变换比例使内容自动适合父 div?

css - 有没有办法通过父属性突出显示所选元素?

javascript - 如何在使用 react js 构建的网站中更改 Title 和 Description

javascript - 如何在 React 中提交表单后删除对输入的关注

javascript - 如何使所有图像适合相同大小的div

php - 如何修复php非法偏移错误

css - 如何在 CSS 文件中编辑 SASS 变量 headerSeperatorColor?

reactjs - 使用 Redux 表单对 FormSection 进行验证

reactjs - 在 EditorJs 中创建自定义元素

jestjs - jest-styled-components 如何测试嵌套组件的样式