css - Styling of a table's row in React

Question

My issue is very simple and I can't fugure it out as I'm not strong in styling... How to change the default table row's height using a css-in-js approach?

My first attempt was using a material-ui's Table and it's TableRow:

const StyledTableRow = withStyles((theme: Theme) =>
    createStyles({
        root: {
            height: '10px', // this doesn't work
        },
    }),
)(TableRow);

My second attempt was using a mui-datatables' MUIDataTable:

const getMuiTheme = (globalTheme: Theme) =>
        createMuiTheme({
            overrides: {
                //MUIDataTable {}, // I've found somewhere that that's a solution, but my package doen't recognize it
                MuiTableRow: {
                    root: {
                        height: '10px' // this doesn't work
                    },
                }
             }
          });

return (
        <MuiThemeProvider theme={getMuiTheme(globalTheme)}>
            <MUIDataTable
                title={props.title}
                data={props.data}
                columns={props.columns}
                options={options}
            />
        </MuiThemeProvider>
    );

If anyone has any pointers regarding any of these two - I'd appreciate it :)

Answer 1

You can use materialui and put className in TableRow like this

const useStyles = makeStyles((theme)=>({
  tableRow: {
    height: 50,
  },
  }));

const classes = useStyles()

    

  <TableRow className={classes.tableRow}>
    ...
  </TableRow>