Decision

<aside> ✅ Option: Why?

</aside>

Context

Since the rebranding of the website and Joy UI, the emotion React theme context is not hosting the Material UI theme structure anymore.

We need to have a decision around:

• How branding theme and design libraries theme live together
• How components consume the theme

An earlier proposal:

• https://github.com/mui/material-ui/pull/34976#issuecomment-1314519718 which is inline with https://github.com/mui/material-ui/pull/35096#discussion_r1020281957

Problems

1. Building a new page always inherits the branding theme. This breaks the playground theme of isolation. Making it harder to reproduce developers’ CodeSandbox locally.
2. Nesting theme providers create bugs, e.g. the spacing difference in https://github.com/mui/material-ui/pull/35096#discussion_r1022186156. We saw nastier ones in the past.

Options

A. Bypass the emotion theme context

The idea in this option is to import a static theme in all the docs-infra components that are rendered in the docs, where Joy UI might be present in the parent context. To make this work, we would need to add an invariant in the runtime to catch issues early on. This would be very close to https://vanilla-extract.style/

Pros:

• No surprises

Cons:

• No dogfooding as we wouldn’t follow the default API we encourage our users to follow.
• Doesn’t work with the sx prop. We don’t have access to the theme.