Struggling with a simple issue that I can't seem to figure out due to my lack of styling skills... How can I adjust the default height of table rows using a css-in-js approach?
First attempt involved using material-ui's Table and TableRow:
const StyledTableRow = withStyles((theme: Theme) =>
createStyles({
root: {
height: '10px', // but this didn't work
},
}),
)(TableRow);
Second attempt was with mui-datatables' MUIDataTable:
const getMuiTheme = (globalTheme: Theme) =>
createMuiTheme({
overrides: {
//MUIDataTable {}, // Saw this as a solution somewhere, but couldn't get it to work
MuiTableRow: {
root: {
height: '10px' // also unsuccessful
},
}
}
});
return (
<MuiThemeProvider theme={getMuiTheme(globalTheme)}>
<MUIDataTable
title={props.title}
data={props.data}
columns={props.columns}
options={options}
/>
</MuiThemeProvider>
);
If anyone has insights on either of these approaches, I would truly appreciate it :)