cannot override react-table styles?

Question

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:

.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?

Is this file in memory react-table-overrides.css before inspecting ? — pixlboy
– pixlboy, Commented Jan 26, 2018 at 8:19
@rach8garg i imported it on public/index.html, I have problems importing it in node :/ — gpbaculio
– gpbaculio, Commented Jan 26, 2018 at 13:17

Watash1 · Accepted Answer · 2018-08-13 17:28:43Z

2

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;
}

answered Aug 13, 2018 at 17:28

Watash1

3604 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

cannot override react-table styles?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related