react material-ui how to override muibox-root

Question

I want to override the MuiBox-root style for the whole application.According to the official documentation I need to identify the class:

And among other things I can override it:

But if I proceed this way, it just removes the styling. What am I doing wrong here?

The `createMuiTheme`, as said in the document, "change every single style injected by Material-UI into the DOM". So it will wipe out the old CSS and replace them with your CSS. If you only want to change some property and leave the rest untouched then maybe `makeStyles` is your answer — kunquan, Dec 09 '20 at 20:41
Yes you can do that with `makeStyles`. You can see how to use that by go to any component and choose to view the whole code. This method basically allow you to write CSS and won't completely wipe out the default CSS — kunquan, Dec 09 '20 at 21:29
@kunquan I can not get this working... it keeps rendering the same value — assembler, Dec 10 '20 at 15:15

Nikhil S · Accepted Answer · 2020-12-09T20:48:30.400

1

This will do:

import { withStyles } from "@material-ui/core/styles";

const styles = {
  root: {
    padding: "10px"
  }
};

function App({ classes }) {
  return <yourelement  className={classes.root}>xyz...<yourelement/>;
}
export default withStyles(styles)(App);

edited Dec 09 '20 at 20:48

answered Dec 09 '20 at 20:38

Nikhil S

3,786
4
18
32

score 0 · Answer 2 · answered Feb 01 '22 at 23:35

0

You can use the sx property on the Box component. For example:

<Box sx={{ padding: "10px" }}>
   <YourChildComponents/>
</Box>

answered Feb 01 '22 at 23:35

trn450

251
2
8

score 0 · Answer 3 · answered Jun 06 '22 at 12:08

Lets say aim is to override background css field of root background css field. Below are the steps

import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  },
});

export default function testFunction() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

Hope this will help.

react material-ui how to override muibox-root

3 Answers3