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;
Improve this question
8
  • 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. Commented Jul 21, 2021 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. Commented Jul 21, 2021 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. Commented Jul 21, 2021 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? Commented Jul 21, 2021 at 14:17
  • 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. Commented Jul 21, 2021 at 14:35

1 Answer 1

Reset to default
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;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you so much you really helped me, with your answer.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.