react material-ui how to override muibox-root

user_8036670 0
Viewed 5973

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

enter image description here

And among other things I can override it:

enter image description here

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

react-material material-ui reactjs overriding css
3 Answers

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);
user_62856000

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

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

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.

user_74112430
Related