Closed ze-flo closed 2 months ago
Here's a table comparing popular React component libraries written with styled-components
or emotion.js
. All support theming and light / dark mode. The table highlights whether each library can render components without first nesting them inside a ThemeProvider
.
Library | Works without ThemeProvider | Notes | Docs | Sandbox |
---|---|---|---|---|
@mui/material | ✅ | DefaultProps injected via React's context API with defaultPropsProvider | https://mui.com/material-ui/getting-started/usage/ | https://codesandbox.io/p/sandbox/jgtp7x |
@mantine/core | ❌ | https://mantine.dev/guides/vite/#setup | ||
@primer/react | ❌ | https://primer.style/guides/react | ||
@chakra-ui/react | ❌ | https://v2.chakra-ui.com/getting-started | ||
@adobe/react-spectrum | ❌ | Components requiring theme render null if its missing. Others render unstyled. | https://react-spectrum.adobe.com/react-spectrum/getting-started.html#setting-up-your-app | https://codesandbox.io/p/sandbox/admiring-wood-fqqj8h |
While @mui/material
has a built-in mechanism to handle the absence of a ThemeProvider
, most tested libraries strictly require it to be set up for proper rendering and styling. The behavior varies across different libraries, with some failing to render components and others rendering unstyled components without a theme.
@ze-flo I think this is pretty compelling evidence that you're on the right path with this PR. Can we get the migration.md
updated with the breaking change to theming
and either add a corresponding ADR or have a plan to add it immediately after?
@ze-flo I think this is pretty compelling evidence that you're on the right path with this PR. Can we get the
migration.md
updated with the breaking change totheming
and either add a corresponding ADR or have a plan to add it immediately after?
I updated the migration docs and created a ticket to add the corresponding ADR in a follow-up PR.
Description
This initiates the process of removing
defaultProps
to avoid deprecation warnings, focusing first ontheme
. Since v9 depends entirely onThemeProvider
and itstheme
for dark mode, rendering a component without wrapping it inThemeProvider
should result in failure.Detail
eslint-plugin-garden-local
ThemeProvider
: sets the theme prop's default toDEFAULT_THEME
Checklist
:globe_with_meridians: demo is up-to-date (npm start
):arrow_left: renders as expected with reversed (RTL) direction:black_circle: renders as expected in dark mode:metal: renders as expected with Bedrock CSS (?bedrock
):guardsman: includes new unit tests. Maintain existing coverage (always >= 96%):wheelchair: tested for WCAG 2.1 AA accessibility compliance:memo: tested in Chrome, Firefox, Safari, and Edge