1

I just switched my project to MUI v5. Now I have the issue that any mui components won't accept the values I set for colors. I tried adding specific override to the theme options but that hasn't helped either. Also wrapping the whole app with StyledEngineProvider at index.js doesn't make any difference.

Here is an example of the MuiButton-Component (same issues for all of them though).

Theme.tsx:

import { createTheme, ThemeOptions } from '@mui/material/styles';

const themeOptions: ThemeOptions = {
  palette: {
    mode: 'light',
    primary: {
      main: '#34b711',
    },
    ...
};

export default createTheme(themeOptions);

SignUp.tsx:

import React from 'react';
import { ThemeProvider, makeStyles  } from '@mui/styles';
import theme from './Theme';

const useStyles = makeStyles((theme: Theme) => ({
   ...
}));

export default function SignIn({ getLogin }) {
    const classes = useStyles(theme);
    ...

    return (
      <ThemeProvider theme={theme}>
        ...
        <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
        >
            Sign In
        </Button>
      </ThemeProvider>
    );
}

Here is a link to a screenshot. The outline of the password-field has the correct primary color I defined.

Hope anyone knows what is causing this issue. Many thanks in advance!

Edit: I just found out that if I don't use styles (makeStyle/useStyle) it works. The documentation states that the styles approach is deprecated. I still would prefer using stylesm as I am not to keen on rewriting everything using the new MUI System approach. Or is there any easy way to migrate?

David
  • 116
  • 2
  • 10
  • Hi David, so you just removed makeStyle/useStyle and it worked? I've done that and It still did not change the primary color of the MUI components. – paulhenry May 18 '22 at 11:43
  • Hi Paul, yes basically. The @mui/styles styling solution is considered legacy now. So I simply define a theme in a separate jsx file. And then you have to import this file wherever you want use it. [MUI Theming](https://mui.com/material-ui/customization/theming) . Note that for some of the components the primary color might not apply by default – David May 19 '22 at 08:36

0 Answers0