---

[mhmdbhsk]

Help for migrating withStyles to styled()

I have a case where I want to rewrite my styling from a previous project that used Material-UI v4 to MUI v5.

Since I saw in MUI v5 using styled api instead of makeStyles to do custom styling, I decided to give it a try.

Everything went smoothly until I found one problem for me.

In a previous project, I used clsx and conditional rendering to set the className when a state is true. Like the code snippet I included below

<AppBar 
      position="absolute"
      className={clsx(classes.appBar, open && classes.appBarShift)}
 >

I'm confused how this concept is implemented in MUI v5 using the styled api. Does anyone know how? Thank you in advance

[mnajdova]

You have two options:

<AppBar 
  sx={{
    ...appBarStyles,
    ...(open && appBarShiftStyles),
  }}
>

const StyledAppBar = styled(AppBar, { 
  shouldForwardProp: prop => prop !== 'open' // don't forward this prop to the AppBar
})(({ open ) => ({
 ...appBarStyles,
 ...(open && appBarShiftStyles),
}))
<AppBar 
  open={open}
>

[mhmdbhsk]

Thank you for the answer!

[michael-land]

You have two options:

<AppBar 
  sx={{
    ...appBarStyles,
    ...(open && appBarShiftStyles),
  }}
>

const StyledAppBar = styled(AppBar, { 
 shouldForwardProp: prop => prop !== 'open' // don't forward this prop to the AppBar
})(({ open ) => ({
...appBarStyles,
...(open && appBarShiftStyles),
}))
<AppBar 
 open={open}
>

which method is more performant?

[mnajdova]

styled() is more performant. I would recommend using sx for one-offs. You can see the perf trade-off here https://mui.com/system/basics/#performance-tradeoff

[ryota-murakami]

Codemod isn't avalable?

[godmar]

I am really confused by what is legacy and what is now recommended.

https://mui.com/styles/basics/ states that: "@mui/styles is the legacy styling solution for MUI. It is deprecated in v5."
Then it links to https://mui.com/system/basics/ which discusses under https://mui.com/system/basics/#why-use-the-system the use of the styled-components system and then using the sx system. One has an X and one has a checkmark.

Is the styled-components system deprecated, or not?

In other words, should I be doing:

import { styled } from '@mui/material/styles'; 

... styled('a')(` ... `)

or is this the legacy solution?

If this is the legacy solution, then how do I achieve reuse of style components?

This link: https://mui.com/styles/basics/#styled-components-api makes me think that styled is deprecated.

[raajnadar]

Styled is the recommended way, https://mui.com/system/styled/#what-problems-does-it-solve

https://mui.com/styles/basics/#styled-components-api is legacy because it is from @mui/styles and not from the new or recommended way @mui/system or @mui/material

[raajnadar]

They should have changes the name of import same name is confusing.

[raajnadar]

Found this blog post to explain clearly https://mui.com/blog/mui-core-v5/#change-of-the-styling-solution

[godmar]

However, the page https://mui.com/system/styled/ appears under "System -> styled", making me think it's not deprecated (?), or is it?

But the same styled utility is mentioned https://mui.com/styles/basics/#styled-components-api where it's clearly deprecated.

Guidance would be appreciated.

[raajnadar]

Found this blog post to explain clearly https://mui.com/blog/mui-core-v5/#change-of-the-styling-solution