Skip to main content

CSS in JS

General guides​

  • ✅ For recommendations
  • ⚠ For warnings
  • 🚫 For forbidden
  • ✅ Use the Box component provided by the library when the CSS is simple and only used once.
  • ✅ CSS custom variables is OK but do not abuse it. Get the variable from the theme if it is possible.
  • ✅ CSS grid is OK but you may want to use the Grid component. Choose the fit one based on your need.
  • 🚫 DO NOT use mystery abbreviations in the sx properties, e.g. <Box sx={{ p: 5 }} /> (DON'T) but <Box sx={{ padding: 5 }}> (DO, easier to read).

Guides on the makeStyles style​

const useStyle = makeStyles<Props>()((theme) => ({
  root: { margin: theme.spacing(4) },
}))

Change style of MUI components​

✅ DO

<Button classes={{ disabled: classes.disabled }} />

Guides on the styled component​

const Title = style.div`
    display: flex;
`

✅ ⚠ You can use styled component in the project​

🚫 DO NOT use dynamic styles​

// 🚫 Bad
const Title = style(Typography)(
  ({ theme }) => `
    margin-left: ${theme.spacing(4)};
`,
)

// 🚫 Bad
const Title = style(Typography)(({ theme }) => ({
  marginLeft: theme.spacing(4),
}))

🚫 Direct selector to the deeper elements of the library​

const Title = style.div`
    & .Mui-Button-root { display: flex; }
`

DO NOT do this.

Reason: Not type-checked. Easy to get things wrong.

🚫 Selector used in the styled component​

Please use makeStyles in this case.

const Dialog1 = style(Dialog)`
    & > .Mui-Some-Mui-Selector {}
`

✅ components or *Component style​

Overwriting styles in this way is acceptable.

const MyExample = styled(Example)`
    /* CSS goes here */
`

// Use it via:
<Parent components={{ example: MyExample }} />
// Or:
<Parent ExampleComponent={MyExample} />

⚠ No every component has this kind of API that allowing to overwrite the inner component so this method may not be able to use.