ThemeProvider

Usage

Change theme globally:

<ThemeProvider 
  theme={{
    ...
  }}
>
  <Button>Hello</Button>
</ThemeProvider>

Only override theme variables for specific element, and these variables will be merged with global vairables:

<Button theme={{ ... }}>Hello</Button>

Discussion

Implementation

This feature means that we need to introduce CSS-in-JS solution to antd

CSS-in-JS solutions: https://github.com/MicheleBertoli/css-in-js

• To implement ThemeProvider, we must choose a CSS-in-JS solution which can get JS variable dynamically.
• To make it easier to migrate to this CSS-in-JS solution, it must support:
  • Pseudo class such as hover & focus style, because we don’t want to set these styles by events.
  • Pseudo elements, for components like Icon & Calendar.
  • CSS Selector Combinators such as + & >, actually, we had used + in Checkbox, etc.
  • Features like auto-prefixer will be better.
  • Media query

CSS Selectors https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

CSS Selectors are important to antd, because it can simplify JavaScript’s code

For compatibility, this CSS-in-JS solution should support server-side rendering, because SSR is an important feature of antd.

Compatibility

Developers may use .ant-btn to override antd’s default style, so we need to reserve these classNames, even though we don’t need them. And this also means that we cannot use inline styles, e.g. material-ui

[benjycui]

This feature is low-priority, even if we accept it.

[neekey]

Another proposal, can we use rem instead of px in the next version? the hard coded px is anti-design for theming. For example, in the current theming system, variables does not comply with each other well if you change the font-size-base to a big value due to the hard coded button height:

you can try it here