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

Question

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

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

Answer 1

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

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

您可以通过 1）将父级转换为 a和 2）注入样式以覆盖到上述父级的 CSS 中来影响类rt-td内部的样式。ReactTableReactTablestyled-componentsrt-td

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

通常这可以解决问题。如果rt-tdinside的样式react-table定义由于特殊性仍然覆盖您的自定义定义，请继续重复rt-td内部的类名Parent（如 this .rt-td.rt-td），直到您的自定义样式获胜。