CODEWITHSUNDEEP
cssreact-table
gpbaculio
gpbaculio

Reputation: 5968

cannot override react-table styles?

From the docs of react-table it is stated that:

We think the default styles looks great! But, if you prefer a more custom look, all of the included styles are easily overridable. Every single component contains a unique class that makes it super easy to customize. Just go for it!

I tried overriding a className of .ReactTable .-pagination .-pageSizeOptions as seen here: enter image description here

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

But it has no effect? but if i do that on inspect element, it's working, I am importing my overrides on the root index.js, tried it on the file, no effetct.

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'),
);

Help?

Upvotes: 4

Views: 5109

Answers (1)

Watash1
Watash1

Reputation: 350

Try using css modules and :global, it's works for me

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

Upvotes: 2

Related Questions