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

Question

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

在CSS中，我只会在样式表中覆盖CSS类。但你如何使用样式组件？我听说这是反模式，但我还应该做些什么呢？

Answer 1

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

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

您可以通过1）将rt-td的父级转换为ReactTable和2）注入样式来覆盖{ReactTable，从而影响styled-components内的类rt-td的样式1}}进入前面提到的父母的CSS。

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

通常这就是诀窍。如果rt-td中react-table的样式定义由于特异性仍然覆盖了您的自定义定义，请继续在rt-td内重复类名Parent（如此.rt-td.rt-td）直到你的自定义风格获胜。