How to make styles for MUIV5 components?-CodePudding

I am using Mui v5 components in my project and currently I am using sx props for styling all the MUI components but putting sx in every line for each components is not looking good. So, I wanted to know is there any other way of styling or applying custom classes to each and every component like we do in styled-components library. I also know about styled from MUI but that is used for making reusable components but i want to use something which will help me in preparing styles which i can apply to any components.

Below is my code example.

  const theme = useTheme();
  return (
    <Box sx={{ border: '1px solid red', flex: 'auto', paddingLeft: '8px' }}>
      <Box
        sx={{
          width: '100%',
          height: '46px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          background: theme.palette['P-10'],
          padding: '8px 24px'
        }}
      >
      </Box>
      <Box sx={{ border: '1px solid green' }}>{AreaChartComp}</Box>
    </Box>
  );
};

If you see there i had to use sx 3 times, which do not want, instead am looking of other way where i can pass classes.

CodePudding user response：

If you wqnt to use MUI5 with the old makeStyles-approach something like this might help:

Simply create an object containing the styles you want to use:

const styles = {
  title: {
    color: 'blue',
  },
  description: {
    color: 'red',
  },
  content: {
    fontStyle: 'italic',
    textDecoration: 'underline',
  },
  button: {
    '&:hover': {
      fontWeight: 'bold',
    },
}
};

and then just use each item in the SX prop on the components, like this:

return (
  <div className="App">
    <Paper>
      <Typography sx={styles.title} variant="h3">Hello World</Typography>
      <Typography sx={styles.description} variant="h5">This is a description</Typography>
      <Typography sx={{...styles.content, color: 'green'}} variant="body1">
        Lorem ipsum dolor sit amet
      </Typography>
      <Button sx={styles.button} variant="contained">The Button</Button>
    </Paper>
  </div>
);

Note that on the 3rd example, if you want to add something additional in the SX prop (such as the green color in the exmaple) you should exapand the style object using the spread syntax (...), and also note the double curly braces to make it a proper object.

This style object works just as an ordinary SX prop, for styling child components, sub classes or pseudo-classes etc... as shown in the button example.

CodePudding user response：

you can use makeStyles in your css file like this:

import { makeStyles } from '@material-ui/core'

export default makeStyles((theme) => ({
    Box: {
         width: '100%',
          height: '46px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          background: theme.palette['P-10'],
          padding: '8px 24px'

    }
    }
    )
    )

and use it in your component:

    import useStyle from './index.styles'

    const classes = useStyle()

    return (
          <Box className={classes.Box} >
        );
      };