React-data-grid: custom styling not working for reactdatagrid

[sravivenki]

Current behavior

react-grid-HeaderCell is taking styles from react-data-grid.js file in inline styles.
want to change background of header cell and i applies below
.react-grid-Header{
background: #5E5B5C !important;
}
without important tag not working.

Expected/desired behavior
want to customize the react-data-grid-cell and header and row elements as seperate styles sheet without important tags

[jpdriver]

hey @sravivenki -- this is a limitation of the way styles currently work. Other than using !important for now the only way to customise the styles is to compile the Grid yourself with modifications to the CSS in the /themes directory.

[sravivenki]

thanks for reply..means may i know how to call themes folder as of now it is taking styles from
react-data-grid.js and react-data-grid-addons.js finally if i have given seperate style sheet also..but no luck.
when i installed react-data-grid in my project.it is giving react-data-grid.js this file which contains all inline styles.am including sepearte stylesheet for that but not applying finally taking same styles from react-data-grid.js and react-data-grid-addons.js files.

[lakshmi-ammu]

how do we use local style thems react data grid.Is there any solution to import ...

[jpdriver]

@lakshmi-ammu you can use local styles by including a CSS file with the same classnames that the elements already have. then in your property customisations add !important after each one.

so for example if you wanted to have a blue background for your Header Cells, make a new CSS file and add this code:

.react-grid-HeaderCell {
  background: 'blue' !important;
}

[lakshmi-ammu]

Thanks you for you replay .I have one more question without using !important can i do any other way to write css my own deigning theme .

[jpdriver]

the only other way to do custom styling for now is to clone this repository, make your CSS changes to the files in /themes, and re-compile the library.

[martinnov92]

@lakshmi-ammu Hello, or you can wrap the grid in the div with your CSS className and then in your CSS do: .my-class-name .react-data-grid {}... and then you don´t have to use !important (it is better with LESS or SASS as you don´t have to type .some-class everytime). Here is similar issue https://github.com/adazzle/react-data-grid/issues/674

[sravivenki]

now styles are working correct.@martinnov92

[VMahipalReddy]

Thank you @martinnov92