1

I'm using Mui5 with SC and I have issues with overriding theme base values. I have base theme like this for base mui components, for example:

const theme = createTheme({
components: {
   MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: "1.75rem",
          color: "red",
        }
      }
    }
  }
});

And now I like to extend the base button with custom colors like this with SC:

const StyledButton = styled(Button)(({ theme }: { theme: Theme }) => {
  return {
    fontFamily: theme.xxx,
    color: "green"
  };
});

This is not working, only the theme defaults are applied.

What's wrong with the implementation or what I'm missing?

BR,

Игор Ташевски
  • 474
  • 1
  • 6
  • 13

1 Answers1

0

Are you using any other package such as material-ui.

Are all your packages also up to date and have these installed:

"@emotion/css": "^11.9.0",
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@mui/material": "^5.9.1",
    "@mui/styled-engine": "^5.8.7",
    "@mui/styles": "^5.9.1",
Rishfilet
  • 61
  • 5