Struggling to style the MUI Data Grid Component.
Specifically the white section. I cannot seem to change the colour of 'rows per page' or the pagination. Also seems that some of the icons are overlapping, you can see in the column header Proposal ID as well as the pagination arrows seem to overlapp.
Heres is the code:
import styles from "./votetab.module.scss";
import { DataGrid } from '@mui/x-data-grid';
const VoteTab = ({}) => {
const rows = [
{ id: 1, ProposalID: 5912, Vote: 'FOR', VotingPower: 100, tx: '0x124958910241'},
{ id: 2, ProposalID: 5912, Vote: 'Against', VotingPower: 100, tx: '0x124958910241'},
{ id: 3, ProposalID: 5912, Vote: 'Against', VotingPower: 100, tx: '0x124958910241'},
{ id: 4, ProposalID: 5912, Vote: 'Against', VotingPower: 100, tx: '0x124958910241'},
{ id: 5, ProposalID: 5912, Vote: 'Against', VotingPower: 100, tx: '0x124958910241'},
{ id: 6, ProposalID: 5912, Vote: 'Against', VotingPower: 100, tx: '0x124958910241'},
{ id: 7, ProposalID: 5912, Vote: 'Against', VotingPower: 100, tx: '0x124958910241'},
{ id: 8, ProposalID: 5912, Vote: 'Against', VotingPower: 100, tx: '0x124958910241'},
{ id: 9, ProposalID: 5912, Vote: 'Against', VotingPower: 100, tx: '0x124958910241'},
{ id: 10, ProposalID: 5912, Vote: 'Against', VotingPower: 100, tx: '0x124958910241'},
{ id: 11, ProposalID: 5912, Vote: 'Against', VotingPower: 100, tx: '0x124958910241'},
];
const columns = [
{ field: 'ProposalID', headerName: 'Proposal ID', width: 150},
{ field: 'Vote', headerName: 'Vote', width: 150},
{ field: 'VotingPower', headerName: 'Voting Power', width: 150},
{ field: 'tx', headerName: 'Tx Hash', width: 415},
];
return (
<>
<h1>Vote</h1>
<div className={styles.grid}>
<DataGrid
rows={rows}
columns={columns}
disableColumnSelector
/>
</div>
</>
);
};
export default VoteTab;
styling:
.MuiDataGrid-cell{
color: #F7F8DA;
border-left: solid 1px #F7F8DA;
}
.MuiDataGrid-columnHeader{
color: #83ddbc;
font-family: 'Turret Road';
background-color: red;
}
.MuiDataGrid-footerContainer{
color: #83ddbc;
font-family: 'Turret Road';
background-color: #fff;
}
On the MUI website the default data grid is:
