styled-components：主题中的样式是重写组件样式

Question

Reproduction

预期：标题的palevioletred颜色和TitleWithoutColor的红色（触发的主题样式）

得到：到处都是红色

原因：导致此问题的规则如下：p.column { text-align: right; }可以覆盖body p.column { text-align: left; }，因此更具体

问题：如何编写主题以使组件的样式具有更高的优先级？

Answer 1

Reactjs

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

的CSS

#random_component {
    color: #0000 !important ;
}

有时，reactjs样式不会被认为比您可能使用的框架更具体。这是因为大多数框架的样式都是用Css编写的。要解决此问题，请使用Css通过定义className或id来覆盖当前框架。此外，您可以添加＆＃34; !important＆＃34;命令确保所有其他特异性水平被否决。