How to create different styles for different React Tables?

Question

We have a web app where we use React Table ( https://react-table.js.org ). We have overridden the original React Table's CSS file in the following way (we have scss file):

@import '~react-table/react-table.css';

.ReactTable {
    border: none;

    .rt-noData {
        z-index: auto;
        top: calc(50% + 20px);
    }

    .rt-thead {
        &.-header {
            box-shadow: none;
            border-bottom: solid 1px #dddddd;
            border-top: solid 1px #dddddd;

            .row {
                display: flex;
            }
    ...

And, of course, all our tables have the same style. But, I need to style some tables in different way that is some of settings are the same, and some of them are not.

How to do that?

Answer 1

You could add a div parent with css for changing the styles, for example wrap your ReactTable in <div className="custom-table"></div> and then:

 .custom-table // -> for custom table
  .ReactTable {
    border: none;

    .rt-noData {
        z-index: auto;
        top: calc(50% + 20px);
    }

    ...


  .ReactTable { // -> for default table
    border: none;

    .rt-noData {
        z-index: auto;
        top: calc(50% + 20px);
    }

    ...