material-ui - change rows' height and padding in table

Question

I am using the Table component from the react library material-ui.
For some reason, each row, including the header, has a 24px padding, top and bottom, which I can't override.
I already tried changing the style on all the underlying components with no success. Here is the code:

<Table>
    <TableHeader adjustForCheckbox={false} displaySelectAll={false} fixedHeader={true}>
        <TableRow>
            <TableHeaderColumn>id</TableHeaderColumn>
            <TableHeaderColumn>name</TableHeaderColumn>
            <TableHeaderColumn>number</TableHeaderColumn>
        </TableRow>
    </TableHeader>
    <TableBody showRowHover={true} displayRowCheckbox={false}>
        {data.map(item => {
            return (
                <TableRow key={item.id}>
                    <TableRowColumn>{item.id}</TableRowColumn>
                    <TableRowColumn>{item.name}</TableRowColumn>
                    <TableRowColumn>{item.number}</TableRowColumn>
                </TableRow>
            );
        })}
    </TableBody>
</Table>

Any idea how which component's style needs to be changed in order to override this styling?

Answer 1

This kind of requirements can be handled with overrides in Material UI as per below example:

Step 1: include following dependencies

import { ThemeProvider } from '@material-ui/core'
import { createMuiTheme } from '@material-ui/core/styles';

Step 2: Define custom css related changes as

const theme = createMuiTheme({
    overrides: {
        MuiTableCell: {
            root: {  //This can be referred from Material UI API documentation. 
                padding: '4px 8px',
                backgroundColor: "#eaeaea",
            },
        },
    },
});

Step 3: Wrap your component or your code block with

<ThemeProvider theme={theme}>
    <Table>
        <TableRow>
             <TableCell component="td" scope="row">
             </TableCell>
        </TableRow>
    </Table>
</ThemeProvider>

This is how we can override the Material UI style from our custom style. Happy Coding :)