Consuming styled with Integration

After thorough research and extensive business practice, we have decided not to embed the styled method in antd-style, but to provide a theme compatibility solution for users of styled.

The principle of theme response in styled

Let's take a look at a typical way of consuming themes in styled:

It can be seen that the theme response of styled is provided through ThemeProvider, which will pass the theme as props to StyledButton, thereby achieving theme response. At the underlying level, whether it's styled-components or @emotion/styled's ThemeProvider, they both create Provider containers and hooks methods through React's Context.

In other words, the styled method and ThemeProvider (along with the accompanying useTheme) must appear in pairs. styled-components' styled cannot respond to @emotion/styled's ThemeProvider, and @emotion/styled's useTheme cannot respond to styled-components' ThemeProvider.

By reading the source code of both ( styled-components and @emotion/styled ), we found that the implementation of these styled methods is coupled with their own created Context, so custom Context cannot be passed in from the outside.

This means that if you want to create styled components and use them, each component must be wrapped in a ThemeProvider externally, instead of being directly imported like regular components.

The root cause of these cumbersome operations lies in the fact that the ThemeProvider used by styled does not provide custom Context injection. At present, it seems that styled-components is unlikely to implement this feature (issue).

This also means that if you want to customize a ThemeContext as the default theme for components and access it in the styled syntax, you must implement your own styled method, which is not practical for most component developers.

In the chapter Comparison of CSS in JS Syntax, we believe that due to design flaws, the styled API will decline in the future. Therefore, in antd-style, we will only provide a compatible usage solution for styled's ThemeProvider and useTheme.

Integration of styled and ThemeProvider

In antd-style's ThemeProvider, we provide a styled prop, which is used to receive the external ThemeContext corresponding to styled, so that the styled method can respond to antd-style's antd token, custom token, and theme state.

For the documentation of the styled API in ThemeProvider, please refer to: ThemeProvider - styled integration configuration

Globally unified integration of styled

For scenarios where there are multiple ThemeProviders, we provide a setupStyled method to uniformly inject the external styled ThemeContext into antd-style's ThemeProvider, so that the styled method can respond to any ThemeProvider.

Typescript type definition support

Similar to the extension of the main theme type in antd-style, if you want your own styled methods to be able to access the main theme type of antd-style, you need to globally supplement the type definitions of styled-components or @emotion/styled in the project.

Injecting main theme type for styled-components

Inject the main theme type of antd-style into styled-components' styled.

Injecting main theme type for @emotion/styled

When injecting the main theme type for emotion's styled, it is important to note that the package to be declared is @emotion/react rather than @emotion/styled.