styled-components：主题中的样式覆盖组件样式[重复]答案

【问题标题】：styled-components: style in theme is overriding component style [duplicate]styled-components：主题中的样式覆盖组件样式[重复]
【发布时间】：2018-01-19 14:09:57
【问题描述】：

Reproduction

预期：palevioletred Title 的颜色，TitleWithoutColor 的红色（已触发主题样式）

得到：到处都是红色

为什么：导致这种情况的规则是这样的：p.column { text-align: right; } 可以被body p.column { text-align: left; } 覆盖，因为它更具体

问题：如何编写主题，让组件的样式优先级更高？

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

Reactjs

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

CSS

#random_component {
    color: #0000 !important ;
}

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

【讨论】：

看起来像 hack，我不想使用 css（在 nextjs 上很难）
根据我的经验，主题都是用 css 或类似语言（有时是 sass）编写的。如果要覆盖它们，则必须通过 css。不过，如果您使用 reactjs 找到另一种解决方案，我会全力以赴！
2017，样式化组件，没有更多类

【解决方案2】：

好的，我想我找到了解决方案，问题是

const globalStyles = styled.div`
p {
  color: ${props => props.theme.somecolor};
}
a {
  color: ${props => props.theme.somecolor};
}`

样式组件的用法不正确，我必须定义组件并扩展它们

const P = styled.p`
  color: ${props => props.theme.somecolor};
`
const A = styled.A`
  color: ${props => props.theme.somecolor};
`
const CustomA = A.extend`
  color: mycolor;
`

【讨论】：

此解决方案会增加 JS 中的代码量并影响应用程序的整体性能，因为需要生成更多类。正确的解决方案是通过> p {} 或&& { p {} } 为孩子使用更具体的样式