css - 不能覆盖反应表样式？

Question

从react-table的文档中可以看出：

我们认为默认样式看起来很棒！但是，如果您更喜欢自定义外观，所有包含的样式都可以轻松覆盖。每个单独的组件都包含一个独特的类，这使得它超级容易定制。去吧！

我尝试覆盖一个类名，.ReactTable .-pagination .-pageSizeOptions如下所示：

.ReactTable .-pagination .-pageSizeOptions {
  visibility: hidden;
  margin: 3px 10px;
  position: absolute;
}

但是没有效果吗？但是如果我在检查元素上这样做，它正在工作，我在根 index.js 上导入我的覆盖，在文件上尝试它，没有效果。

require('./react-table-overrides.css');

const client = new ApolloClient({
  link: new HttpLink({ uri: '/graphql' }),
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root'),
);

帮助？

Answer 1

尝试使用 css 模块和 :global，它对我有用

:global div.pagination-bottom > div > div.-center > span.select-wrap.-pageSizeOptions {
  visibility: hidden !important;
  margin: 3px 10px !important;
  position: absolute !important;
}