Should colors.background, text etc automatically apply to Styled export?

[erikdstock]

Hi, I'm trying to understand how Styled.{components} work outside the context of an MDXProvider. I'm imagining that a minimal theme definition will automatically apply to Styled elements, so one could replace all instances of <p>some text</p> with <Styled.p ... and see the text color as theme.colors.text but this doesn't seem to be the case.

I guess my 2 questions are:

• is the theme.styles object required for any Styled components to have a default style, ie not require sx={{color: "text"}} ?
• if so, are the properties color.{background,text,etc} actually required or just recommendations?

Happy to close this or convert it into an issue/PR to update docs if it helps.

[jxnblk]

The Styled components will pick up values from theme.styles so that theme.styles.p will apply to <Styled.p />. You can also use the sx prop with Styled components if you've set the custom pragma in a module. The colors and other raw values don't apply automatically to any component other than the ColorMode component, which will use colors.text and colors.background on the body element

To try to answer, theme.styles isn't required, but that's where the Styled components get default styles, and the colors object shape is mostly a recommendation for interoperability/portability, but text and background are tied to the color modes feature

[erikdstock]

Thank you, extremely helpful!

[jxnblk]

Closing this for now, but feel free to open another issue or PR if you have a more specific example of how to make the docs around this clearer