Customizing CSS styles not working as described

We tried to override the cell layout as described in the docs by naming the css file `react_spreadsheet_grid_overrides.css`.
Using it in an serverside react app we did not get our custom css working without using `!important`

* `react-spreadsheet-grid` version: ^2.0.0
* `React` version: ^16.12.0
* `Operating System`: any

Relevant code or config

**_app.js**
```javascript

```

**index.js**
```javascript
const SheetExample2 = dynamic(
() => import('../../components/SheetExample2'),
{
ssr: false
}
);
```

**SheetExample2.jsx**
```javascript
import React, { useState, useRef } from 'react';
import { Grid as Table, Input, Select } from 'react-spreadsheet-grid';
import { IconButton, Button, Grid, makeStyles } from '@material-ui/core';
import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
import AddCircleIcon from '@material-ui/icons/AddCircle';

const useStyles = makeStyles((theme) => ({
gridAddIconButtonWrapper: { marginBottom: '5px' },
gridDeleteButtonWrapper: { paddingTop: '40px' },
addIcon: { color: '#008000' },
deleteIcon: { color: '#FF0000' },
}));

const rowTemplate = { from: '', to: '', distance: '', fuel: '' };

const SheetExample2 = () => {
const classes = useStyles();

const rowIdIndex = useRef(1);
const [rows, setRows] = useState([]);
const [gridHeight, setGridHeight] = useState(100);

const addNewRow = () => {
setRows([...rows, { id: rowIdIndex.current, ...rowTemplate }]);
setGridHeight((previousState) => previousState + 90);
rowIdIndex.current++;
};

const onFieldChange = (rowId, field) => (value) => {
const row = rows.find((row) => row.id === rowId);
row[field] = value;
setRows([].concat(rows));

//calculation example for fuel, distance...
if (row.from != null && row.to != null && row.from !== '' && row.to !== '') {
row['distance'] = `${Math.floor(Math.random() * 100) + 100} km`;
row['fuel'] = `${Math.floor(Math.random() * 100) + 50} L`;
}
};

const deleteRow = (rowId) => {
const remainedRows = rows.filter((row) => row.id !== rowId);
setRows(remainedRows);
setGridHeight((previousState) => previousState - 90);
};

const handleClick = (row, columnId) => {
if (columnId === 'delete') {
const remainedRows = rows.filter((r) => r.id !== row.id);
setRows(remainedRows);
}
};

return (







handleClick(row, columnId)}
focusOnSingleClick={true}
columns={[
{
id: 1,
title: () => 'Start',
value: (row, { focus }) => {
return ;
},
},
{
id: 2,
title: () => 'End',
value: (row, { focus }) => {
return ;
},
},
{
id: 3,
title: () => 'Distance',
value: (row, { focus }) => {
return ;
},
},
},
{
id: 'delete',
title: () => 'Action',
value: () => {
return (



);
},
},
]}
rows={rows}
getRowKey={(row) => {
row.id;
}}
/>

);
};
export default SheetExample2;
```

**react_spreadsheet_grid_overrides.css**
```css
...
.SpreadsheetGrid__headCell {
display: inline-flex;
position: relative;
color: white;
font-size: 12px;
line-height: 14px;
font-weight: 500;
white-space: nowrap;
border-bottom: none;
padding: 10px 8px 8px 8px;
text-align: left;
background-color: #000000;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
border-right: 1px solid rgba(0, 0, 0, 0.12);
}
...
```

**package.json**
```json
{
"name": "client",
"version": "1.0.0",
"description": "SheetViewExample",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "nodemon index.js",
"build": "next build",
"start": "next start"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@material-ui/core": "^4.7.1",
"@material-ui/icons": "^4.5.1",
"@material-ui/lab": "^4.0.0-alpha.34",
"async": "^3.1.1",
"axios": "^0.19.0",
"base-64": "^0.1.0",
"express": "^4.17.1",
"is-number": "^7.0.0",
"isomorphic-unfetch": "^3.0.0",
"js-cookie": "^2.2.1",
"jwt-decode": "^2.2.0",
"konva": "^4.0.18",
"lodash": "^4.17.15",
"next": "^9.1.4",
"next-cookies": "^1.1.3",
"next-i18next": "^0.52.1",
"nodemon": "^1.19.4",
"perf_hooks": "0.0.1",
"pigeon-maps": "^0.14.0",
"pigeon-marker": "^0.3.4",
"pigeon-overlay": "^0.2.3",
"react": "^16.12.0",
"react-countdown-now": "^2.1.2",
"react-dom": "^16.12.0",
"react-draggable": "^4.2.0",
"react-konva": "^16.9.0-1",
"react-spreadsheet-grid": "^2.0.0",
"seedrandom": "^3.0.5",
"socket.io-client": "^2.3.0",
"use-image": "^1.0.5"
},
"repository": {
"type": "git",
"url": ""
}
}
```

The changes in our css were not applied until we used `!important` after every css property.