我在我的項目中使用了Mui v5組件，目前我使用sx props來設計所有Mui組件的樣式，但是將sx放在每個組件的每一行看起來并不好。所以，我想知道是否有任何其他的方式來樣式化或者應用自定義類到每一個組件，就像我們在樣式化組件庫中做的那樣。我也知道MUI的樣式，但它是用來制作可重用組件的，但我想用一些東西來幫助我準備可以應用于任何組件的樣式。

下面是我的代碼示例。

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.

如果您想將MUI5與舊的makeStyles一起使用，這樣的方法可能會有所幫助:

只需創建一個包含您想要使用的樣式的對象:

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

然后只需將SX道具中的每一項用到組件上，就像這樣:

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

注意，在第三個例子中，如果你想在SX道具中添加一些額外的東西(比如例子中的綠色)，你應該使用spread語法(...)，還要注意雙花括號，使其成為合適的對象。

這個樣式對象就像一個普通的SX道具，用于樣式化子組件、子類或偽類等...如按鈕示例所示。

您可以像這樣在css文件中使用makeStyles:

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'

    }
    }
    )
    )