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

Question

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

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

Answer 1

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

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

您可以通过以下方式影响 ReactTable 中类 rt-td 的样式:1) 将 ReactTable 的父级转换为 styled-components 和 2) 注入(inject)样式以覆盖 rt-td 到上述父项的 CSS 中。

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

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