仅使用样式化组件时如何影响外部 CSS 类

【问题标题】：How to influence foreign CSS classes when just using styled components仅使用样式化组件时如何影响外部 CSS 类
【发布时间】：2018-03-31 19:04:32
【问题描述】：

我正在使用 react-table，我想将 CSS 规则应用于 rt-td 类，该类无法通过其 API 提供的内容访问或修改。

在 CSS 中，我会从样式表中覆盖 CSS 类。但是你如何使用样式化的组件呢？听说是反模式，但我该怎么办？

【问题讨论】：

标签： css reactjs styled-components react-table

【解决方案1】：

假设react-table导出的组件ReactTable的父级是一个简单的div。

const Test = () => (
  <div>
    <ReactTable someProperty={someValue}/>
  </div>
)

您可以通过 1) 将 ReactTable 的父级转换为 styled-components 和 2) 注入样式以覆盖 rt-td 到上述父级的 CSS .

const Parent = styled.div`
  .rt-td {
    /* your custom style goes here*/
  }
`
const Test = () => (
  <Parent>
    <ReactTable someProperty={someValue}/>
  </Parent>
)

通常这样就可以了。如果 rt-td 在 react-table 中的样式定义由于特殊性仍然覆盖了您的自定义定义，请在 Parent 中重复类名 rt-td（例如 .rt-td.rt-td），直到您的自定义样式获胜。

【讨论】：