CODEWITHSUNDEEP
javascripthtmlcssreactjsmaterial-ui
Michael Lorton
Michael Lorton

Reputation: 44376

Changing the styling in MUI Table

I'm creating a Material UI table what I believe is the default way, and I'm getting huge padding internally.

Screenshot of the problem

I have tried using withStyles and passing the resulting class into through the component property, like this:

const StyledPaper = withStyles(theme => ({
  root: {
    padding: "0",
  },
}), Paper);
...
        <Table component={StyledPaper}>

I have tried making classes and passing them in:

const useStyles = makeStyles(theme => ({
  root: {
    padding: "0",
  },
}));
...
    const classes = useStyles();
...
        <Table classes={classes}>

I have futzed around endlessly and I'm not having any effect at all.

Any suggestions?

Upvotes: 0

Views: 6858

Answers (1)

keikai
keikai

Reputation: 15146

If you look at the DOM element class name, you would find out that it starts with MuiPaper-root under the MuiGrid-root element.

Perhaps use nesting selector is a good approach in this situation for customized styles

import { withStyles } from "@material-ui/core/styles";
const styles = {
  root: {
    "& .MuiPaper-root": {
      padding: 0
    }
  }
};
...
const { classes } = this.props;
...
export default withStyles(styles)(App);

usage

Notice it's not inside the Table so you may want to add the padding for Grid

<Grid container>
  <Grid item className={classes.root} // ...>
    // ...
  </Grid>
</Grid>

Similar online demo and related QA:

How to change material-ui Textfield label styles in react

Edit staging-framework-3h4m8

Upvotes: 1

Related Questions