how to style different tables ag-grid?

Question

SITUATION #1: I have tables with different styles. When I go back to Table №1, Table №3, and Table №4 it takes styles from Table №2. How can I apply styles to Table №2 for this table only? Is there a style prefix for different tables?

The global style for Table №1, Table №3, and Table №4 are called grid-custom.css:

.ag-root {
  border-radius: 30px;
}

For Table №2 I have local styles called grid.css:

.ag-root {
  border-radius: 0;
}

return:

  return (
    <AgGridReact
      ref={ref}
      rowData={rowData}
      columnDefs={columnDefs}
      defaultColDef={{ resizable: true }}
      rowHeight={60}
      headerHeight={50}
      onFirstDataRendered={onFirstDataRenderedSchoolTeam}
      onGridSizeChanged={() => onGridSizeChanged(ref)}
    />
   )

====================================================

The first situation is done. When just one id is applied to the table it works.

SITUATION #2: I have global styles that apply to two tables. But after global styles, I need to apply a separate style for each table border-radius. In this case works just for #table1. Why? Same styles:

#table1 .ag-root {
  border-radius: 30px;
};

#table2 .ag-root {
  border-radius: 0;
};

Id for each table:

<div className="container-tables">
      <div id="table1">
        <TableOne
          rowData={rowDataOne}
          ...
        />
      </div>

      <div id="table2">
        <TableTwo
          rowData={rowDataTwo}
          ...
        />
      </div>
</div>

and same return for both:

return (
    <AgGridReact
      ref={ref}
      rowData={rowData}
      columnDefs={columnDefs}
      defaultColDef={{ resizable: true }}
      rowHeight={60}
      headerHeight={50}
      onFirstDataRendered={onFirstDataRenderedSchoolTeam}
      onGridSizeChanged={() => onGridSizeChanged(ref)}
    />
   )

Answer 1

I made folders for each table where I moved closer css styles. It looks:

-tables/
---tables.tsx
---tables-grid.css   <--- before tried to put styles for both tables `ag-root {border-radius: 0 or 30px}` here. It's doesn't work.
---table1/
------table1.tsx
------table1-grid.css   <---- now css closer `ag-root {border-radius: 30}`. Here it works!
---table2/
------table2.tsx
------table2-grid.css   <---- now css closer `ag-root {border-radius: 0}`.  Here it works!

Inside tables.tsx:

 return (
    <div className="tables-grid">
      <div id="table1" className="table1">
        <SchoolTeamTable
          rowData={rowData}
        />
      </div>
      <div id="table2" className="table2">
        <SeasonDetailsTable
          rowData={rowData}
        />
      </div>
    </div>

Inside tables-grid.css:

.tables-grid {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.table1 {
  width: 20%;
  min-width: 200px;
}

.table2 {
  width: 80%;
}

Inside table1.tsx and table2.tsx I import table-grid*.css as usualy import './table1.grid.css'; and import './table2.grid.css';. and return same for both:

return (
    <AgGridReact
      ref={ref}
      rowData={rowData}
      columnDefs={columnDefs}
      defaultColDef={{ resizable: true }}
      rowHeight={60}
      headerHeight={50}
      onFirstDataRendered={onFirstDataRenderedSchoolTeam}
      onGridSizeChanged={() => onGridSizeChanged(ref)}
    />
)

But for each table using a separate id style, in order to achieve ag-root {border-radius: 30 or 0}.

In table1.grid.css it looks:

#table1 .ag-root {
  border-radius: 30px;
};

In table2.grid.css it looks:

#table2 .ag-root {
  border-radius: 0px;
};

Answer 2

You have 2 CSS files. Assuming, global file as which is applied on App.js for all components, and local for specific component. If you specifically want to apply css to Table 2 only then you need to assign id to div like this :

<div id="table2">
    <AgGridReact
      ref={ref}
      rowData={rowData}
      columnDefs={columnDefs}
      defaultColDef={{ resizable: true }}
      rowHeight={60}
      headerHeight={50}
      onFirstDataRendered={onFirstDataRenderedSchoolTeam}
      onGridSizeChanged={() => onGridSizeChanged(ref)}
    />
</div>

Then inside CSS:

#table2 .ag-root {
    border-radius: 0;
    background-color: #357a38;
}

Now, above CSS will only apply to id with table2 not on other tables

---

UPDATE:

The CSS is only getting applied on one table and not on other table. I can't figure it out why! But using 4th method: CSS Modules, I managed to get the result.

Create a file named like style.module.css. Inside the file write your CSS

.table1 {
    background-color: #0575e6 !important;
}


.table2 {
    background-color: #357a38 !important;
}

Then import this file in your component like this:

import styles from './style.module.css'  //make sure the path is correct

Then, add className to your div

<div className={styles.table1} id="table1">
   ...
</div>

Same with table2, and you can remove id from divs as they are of no use now.

<div className={styles.table2}>
   ...
</div>