CODEWITHSUNDEEP
reactjsmaterial-ui
AlainIb
AlainIb

Reputation: 4728

mui v5 what is the best way to use style with pragmatic condition?

I'm upgrading a project from material ui v4 to v5 and struggle to update classes/styles properly.

this is a sandBox :

https://codesandbox.io/s/69629346-mui-v5-theming-with-emotion-mui-forked-2j8vze?file=/demo.tsx:1611-1618

In this code 2 box are displayed with 2 ways of applying style. I want to avoid using makeStyles and use SX/emotion as recommanded.

So backgroundColor is red, on hover it become blue. It works on both. Now if i click the switch, the backgroundColor become yellow, but on hover of second box the color stay blue instead of grey.

what i'm missing ? thanks

import React, { useState } from "react";
import { makeStyles } from "@mui/styles";
import clsx from "clsx";
import { Box, Switch } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";
const theme = createTheme();

const useStyles = makeStyles((theme) => ({
  imageWithBorder: {
    height: theme.spacing(10),
    width: theme.spacing(30),
    padding: theme.spacing(2),
    margin: theme.spacing(2),
    backgroundColor: "red",
    "&:hover": {
      backgroundColor: "blue"
    }
  },
  greyHover: {
    backgroundColor: "yellow",
    "&:hover": { backgroundColor: "grey" }
  }
}));

const styles = {
  imageWithBorder: {
    height: 80,
    width: 240,
    padding: 2,
    margin: 2,
    backgroundColor: "red",
    "&:hover": {
      backgroundColor: "blue"
    }
  },
  greyHover: {
    backgroundColor: "yellow",
    "&:hover": { backgroundColor: "grey" }
  }
};

export default function Test() {
  const classes = useStyles();

  const [checked, setChecked] = useState(false);

  return (
    <Box sx={{ display: "flex", flexDirection: "column" }}>
      <Box>
        Enable grey hover : <Switch checked={checked} onChange={handleChange} />
      </Box>
      <p>1 With clsx & useStyles</p>
      <Box
        className={clsx(classes.imageWithBorder, checked && classes.greyHover)}
      />

      <p>2 With sx & plain styles</p>
      <Box sx={[styles.imageWithBorder, checked && styles.greyHover]} />
    </Box>
  );
  function handleChange(event) {
    setChecked(event.target.checked);
  }
}

export default function BasicUsage() {
  return (
    <ThemeProvider theme={theme}>
      <Test />
    </ThemeProvider>
  );
}

Upvotes: 3

Views: 772

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29317

By some reason mui doesn't accept backgroundColor: "grey". It's not even render it in the output css.

See gif

Instead, use gray or hex value.

https://codesandbox.io/s/69629346-mui-v5-theming-with-emotion-mui-forked-d0npw6?file=/demo.tsx

Upvotes: 3

Related Questions