Wrong theme object for CssBaseline style overrides when using styled-components

[justgowa]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: CSB Steps:

1. open CSB
2. see console

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. ```

[mnajdova]

Here is a working solution: https://codesandbox.io/s/styled-components-forked-n5k1ri?file=/src/demo.js I hope this helps.

[github-actions[bot]]

👋 Thanks for using MUI Core!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support, please check out https://mui.com/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others. If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[justgowa]

@mnajdova I expect theme object

But instead i have

{
    styles: Fn
    defaultTheme: Object
    theme: Object
}

broken example If i try to use theme in style overrides then app crashes

[mnajdova]

Ah, I see the confusion now. The signature between emotion & styled-components is different. We normalized it in the GlobalStyles components, but we haven't done it in the style overrides. We should update the documentation for the CSS baseline, for example this should be updated: https://mui.com/material-ui/react-css-baseline/#scrollbars

You should treat the value you receive in the styleOverrides as props, and extract the theme out of it.