1

i am trying to create React aplication which uses AG-Grid table. Previously I customized table and removed borders of the ag grid by overiding css. I used this code to do so.

.ag-root-wrapper {
    border: solid 0px !important;
    border-color: var(--ag-border-color, white) !important;
}

But i noticed that code which i used only for one component has influenced whole aplication. I was curious maybe is there way to locally import css only for specific component? This is the way i was importing css for component

import './Statistics.css'
import { AgGridColumn, AgGridReact } from 'ag-grid-react';

const Statistics = () => {
    return (
    <div className='content'>
     <div className='content-left'>
      <div className="ag-theme-alpine">
        <AgGridReact
           rowData={data}
            style={{borderColor: 'red'}}
            rowSelection="single"
            filter={false}
        >
         <AgGridColumn
          headerName="Date"
          field="date"
          resizable={true}
          filter={false}
          width={130}
          flex={1}
          sort={'asc'}
          cellStyle={{fontSize: '1vw'}}
         />
       </AgGridReact>
      </div>
     </div> 
    </div>
     )}

export default Content;
Vlad
  • 419
  • 1
  • 10
  • 21
  • 1
    Just wrap ag-grid in a React component that you create, create a stylesheet with only the styles related to that component, and then import it in that component. They styles will scope to the component, instead of the entire application. You should avoid creating global styles/stylesheets when those styles only apply to small sections of your application. – Evan Bechtol Jul 21 '21 at 13:50
  • I did it already, the ag grid was used in separate component and that file i imported was also only for one component but it has influence on others too. – Vlad Jul 21 '21 at 13:53
  • can you share more code so that we can get an idea of the structure being used in your application? Share all relevant files please. – Evan Bechtol Jul 21 '21 at 13:54
  • Based on your update, you appear to be using and importing the stylesheet correctly. Is the style for `ag-root-wrapper` perhaps to high-up in the DOM chain for ag-grid, and overriding other styles? – Evan Bechtol Jul 21 '21 at 14:17
  • ag-root-wrapper has influence on all other components but it's is not high-up in the DOM chain. Content component is just a component like any other siblings. The wierdest thing is that it also had influence even on ther pages. I suspect it's because !importent tag but i can't refuse from using it. – Vlad Jul 21 '21 at 14:23
  • Is the `ag-root-wrapper` class scoped to only the ag-grid component(s)? It shouldn't be bleeding outside of the `ag-grid` even if you have `!important`, unless it's encapsulating other elements which it shouldn't. – Evan Bechtol Jul 21 '21 at 14:26
  • Yes, it is scoped to only the ag-grid components. This ag-root-wrapper has influence on other ag grids from other components which are siblings for Content. – Vlad Jul 21 '21 at 14:31
  • 1
    you may need to find a component that is lower-scoped than `ag-root-wrapper`. I have used ag-grid also, and styling it is not easy by any means. – Evan Bechtol Jul 21 '21 at 14:35

1 Answers1

1

When you use pure css or css preprocessors (Sass, less..), the imported css will always be global to your app. It is really useful to scope every component in a unique classname so you can scope css.

import './Statistics.css'
import { AgGridColumn, AgGridReact } from 'ag-grid-react';

const Statistics = () => {
    return (
+   <div className='root-statistics'>
    <div className='content'>
     <div className='content-left'>
      <div className="ag-theme-alpine">
        <AgGridReact
           rowData={data}
            style={{borderColor: 'red'}}
            rowSelection="single"
            filter={false}
        >
         <AgGridColumn
          headerName="Date"
          field="date"
          resizable={true}
          filter={false}
          width={130}
          flex={1}
          sort={'asc'}
          cellStyle={{fontSize: '1vw'}}
         />
       </AgGridReact>
      </div>
     </div> 
    </div>
+   </div>
     )}

export default Content;

.root-statistics .ag-root-wrapper {
    border: solid 0px !important;
    border-color: var(--ag-border-color, white) !important;
}
Danny Ouellet
  • 146
  • 3