CODEWITHSUNDEEP
reactjsmaterial-ui
Cleiton Freitas
Cleiton Freitas

Reputation: 527

Material UI migration to V5: how to access theme properties types in @mui/material v5

After migrating from @material-ui version 4 to 5 I'm not accessing the theme properties types, does anyone know what I need to do to solve this?

Material-ui v4: I can access the theme properties! enter image description here

See in CodeSandbox: Material-ui v4

Material v5: I can't access theme properties! enter image description here

See in CodeSandbox: Material-ui v5

In both examples the theme is working, only the properties are not showing in version 5.

Thanks for your help!

Upvotes: 1

Views: 1018

Answers (2)

Cleiton Freitas
Cleiton Freitas

Reputation: 527

Follows code implemented using styled!

enter image description here

Or using sx prop with useTheme from "@mui/material"

import { Button, useTheme } from "@mui/material";

export default function App() {
  const theme = useTheme();
  return (
    <div className="App">
      <h1>@mui/material v5</h1>
      <h2>I can't access theme properties!</h2>

      <MuiButton className={classes.button} variant="contained">
        Button One
      </MuiButton>
      <br />
      <MuiButtonTwo variant="contained">Button Two</MuiButtonTwo>
      <br />
      <Button
        variant="contained"
        sx={{
          marginTop: theme.spacing(2),
          background: theme.palette.warning.main
        }}
      >
        Button Three
      </Button>
    </div>
  );
}

enter image description here

Upvotes: 0

user12302978
user12302978

Reputation:

material ui 5 is recommending @emotions instead of styled-components they have given this command which will automatically convert all styled component to @emotion based styled component so please check on this once.

npx @mui/codemod v5.0.0/jss-to-styled <path>

Upvotes: 2

Related Questions