Updating from v5 to v6 doesnt work: createStyled.js:26 Uncaught TypeError: Cannot assign to read only property 'theme' of object '#<Object>'

[BennyAlex]

Steps to reproduce

I am trying to upgrade to v6 and also used the codemods but I am seeing this error.

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: 'theme' of object, reateStyled.js:26

[BennyAlex]

I think the error came from using a styled component and passing the theme to it

and the theme was imported from the theme file (createTheme({})

[DiegoAndai]

Hey @BennyAlex, thanks for the report! Could you provide a minimal reproduction? This would help a lot. A repo sharing your project would be perfect. Thank you!

[visualjeff]

I have the same issue here with a component. Exact same error message after upgrading to v6.

npx @mui/envinfo

  System:
    OS: macOS 13.5
  Binaries:
    Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm
    pnpm: 8.14.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 130.0.6723.117
    Edge: Not Found
    Safari: 16.6
  npmPackages:
    @emotion/react:  11.13.3 
    @emotion/styled:  11.13.0 
    @mui/base:  5.0.0-beta.61 
    @mui/core-downloads-tracker:  6.1.7 
    @mui/lab: 6.0.0-beta.14 => 6.0.0-beta.14 
    @mui/material:  6.1.6 
    @mui/private-theming:  6.1.7 
    @mui/styled-engine:  6.1.7 
    @mui/system:  6.1.6 
    @mui/types:  7.2.19 
    @mui/utils:  6.1.6 
    @mui/x-date-pickers: 7.22.2 => 7.22.2 
    @mui/x-internals:  7.21.0 
    @mui/x-tree-view:  7.22.1 
    @types/react:  18.3.12 
    react: 18.3.0-canary-2c338b16f-20231116 => 18.3.0-canary-2c338b16f-20231116 
    react-dom: 18.3.0-canary-2c338b16f-20231116 => 18.3.0-canary-2c338b16f-20231116 
    typescript: 5.3.3 => 5.3.3 

Is there any upgrade guidance for who use styled? Any tools out there that can validate our stylings?

[DiegoAndai]

Hey @visualjeff, thanks for the report! Could you provide a minimal reproduction? This would help a lot. A live example would be perfect. A repo or a StackBlitz sandbox would work. Thank you!

[visualjeff]

I think I figured out our issue while creating repro code. Don't pass the theme down as a prop so you can use it to style a component.

const MarkdownText = ({
    textType = 'disclaimer',
    markdownText = 'test 123',
    uniqueId = '123',
    enableFontWeight = true
}: MarkdownTextPropType) => {
    const theme = useTheme();

    return (
        <StyledMarkdownTitleText
            enableFontWeight={enableFontWeight}
            textType={textType}
            theme={theme}
            uniqueId={uniqueId}
        >
            <MarkdownRenderer markdown={markdownText} />
        </StyledMarkdownTitleText>
    );
};

[BennyAlex]

I think I figured out our issue while creating repro code. Don't pass the theme down as a prop so you can use it to style a component.

const MarkdownText = ({
    textType = 'disclaimer',
    markdownText = 'test 123',
    uniqueId = '123',
    enableFontWeight = true
}: MarkdownTextPropType) => {
    const theme = useTheme();

    return (
        <StyledMarkdownTitleText
            enableFontWeight={enableFontWeight}
            textType={textType}
            theme={theme}
            uniqueId={uniqueId}
        >
            <MarkdownRenderer markdown={markdownText} />
        </StyledMarkdownTitleText>
    );
};

thats what I also wrote here

I think the error came from using a styled component and passing the theme to it

and the theme was imported from the theme file (createTheme({})

so thats basically the solution to remove the theme prop from styled components

[visualjeff]

So I think we can close the issue.

[DiegoAndai]

@BennyAlex so I understand you were able to solve the issue on your side as well?