Advanced styling

ReactGrid lets you style all key components using Sass variables.

Before you use .scss files you have to install node-sass package:

npm install node-sass

To override default styles of ReactGrid you have to assign new values ( available variables ) and then import all necessary .scss files. If variable is not passed before getting imported core.scss it will not be modified.

Here’s an example of how to add custom focus style on your grid.

// Your custom color
$primary-color: #3579f8;

@import '@silevis/reactgrid/styles.scss';

See full styling example below:

If you use multiple grids on the same page, make sure your grid styles are ‘local’.

// Independent ReactGrid classess
#reactgrid-red {
    $primary-color: red;
    @import '@silevis/reactgrid/styles.scss';
}

#reactgrid-blue {
    $primary-color: blue;
    @import '@silevis/reactgrid/styles.scss';
}

Wrap ReactGrid component into div element with class name:

<div id="reactgrid-red">
    <ReactGrid {...props}/>
</div>

<div id="reactgrid-blue">
    <ReactGrid {...props}/>
</div>