problem in withStyle defined in Material UI because of difference className in server and client

Question

I'm using nextjs and Sass. All of my styles are worked fine but just when I'm using withStyles this warning appears

const LikeButton = withStyles((theme: Theme) => ({
  root: {
    color: "#666666",
    fontSize: "1.3125rem!important",
    fontWeight: 700,
    maxWidth: "51px!important",
    width: "51px!important",
    minWidth: "51px!important",

    backgroundColor: "#fcfbfa",
    marginLeft: "1rem",
    border: "1px solid #dcdcdc",
    "& svg": {
      fill: "currentColor",
      color: "currentColor",
    },
    "&:hover": {
      color: theme.palette.secondary.main,
      backgroundColor: "#fcfbfa",
    },
    "&.Mui-disabled": {
      backgroundColor: "#e6e6e6",
      color: "#666666!important",
    },
  },
}))(Button);

I did all solutions mentioned in this link https://www.mashen.zone/thread-3621719.htm but didn't solve.

Does this answer your question? [Warning: Prop \`className\` did not match. when using styled components with semantic-ui-react](https://stackoverflow.com/questions/51791163/warning-prop-classname-did-not-match-when-using-styled-components-with-seman) — Giovanni Esposito, Sep 08 '21 at 07:01
@Giovanni Esposito I'm not using the styled component. I'm using material UI. All styles worked fine just when I'm using withStyles, this warning appear — amin71, Sep 08 '21 at 07:13
Does this help answer your question: [MaterialUI makeStyles undoes custom css upon refresh in NextJS](https://stackoverflow.com/questions/66089290/materialui-makestyles-undoes-custom-css-upon-refresh-in-nextjs/66089559#66089559)? — juliomalves, Sep 08 '21 at 20:29

problem in withStyle defined in Material UI because of difference className in server and client

0 Answers0