[just-boris]

Hello!

I've been using Antd components for the last year in some my project. All components are also available here[0] as single modules for better reusability and customization.

Currently, I have solved all my theming goals with Plain CSS. For each component, that I'd like to customize I created a wrapper

   import Slider from 'rc-slider';

   function StyledSlider(props) {
      return <Slider className="my-slider" {...props} />
   }

Then in CSS

   .my-slider .rc-slider-track {
      background: #FFDF66;
   }

(This is a very simplified example, just shows the way).

I have read about styled-components, but I don't understand how it would help me with theming. I don't think that rewriting every component from LESS to styled-components to make possible to use ThemeProvider will be an option because it doesn't give you any benefits comparing with customization guide[1], that also gives you good enough way to override defaults.

   [0]: https://github.com/react-component/

   [1]: https://ant.design/docs/react/customize-theme

[mxstbr]

We're currently writing some documentation specifically pertaining to theming third-party component libraries, which you can read the WIP of here: https://github.com/styled-components/styled-components-exper...

The TL;DR is that this customization guide will suddenly become really easy. Antd can specify a default theme and users can override the parts of the default theme they want!

All the user has to do is pass a single prop to the ThemeProvier and override what they want:

    import { ThemeProvider } from 'antd';

    <ThemeProvider theme={{ primaryColor: '#1DA57A' }}>
      <App />
    </ThemeProvider>

On top of that different parts of your app can have different themes. Making your sidebar dark but your main component light is not an issue – just wrap them in two ThemeProviders with different themes:

    <ThemeProvider theme={darkTheme}>
      <Sidebar />
    </ThemeProvider>
    <ThemeProvider theme={lightTheme}>
      <Main />
    </ThemeProvider>

It's also all dynamic, meaning you can let the users of your app provide custom themes for your app and it'll automatically apply.

Compare that with the current customization guide, not only do users have to use webpack, they also have to use specific plugins just to make customization of third-party components work! It's also all global, which means styling the sidebar dark and the main area light is impossible since it's all just Less variables applied at build time. This also makes it very hard to have user supplied themes.

Does that make it clear enough how using styled-components would help with theming? :-)

[just-boris]

The ability to apply different overrides for some branches in a component tree is powerful. Sure, I will come back to styled-components when I will get that issue.

Currently, I (as well as most users, I suppose) just need to apply some global color overrides to match with company's brand guidelines that I can solve it with old good plain CSS.

Also, for big projects, like Antd, transition to some other CSS-tooling almost impossible, because CSS/LESS code is spread across several repositories and will take a lot of efforts and time.

And finally, the current implementation is better because it doesn't mention styles in Javascript at all, so the library users are able to choose any way to style components without extra efforts from the side of library authors.

[mxstbr]

You can choose to style styled components any way you want too! You can pass in class names, inline styles, whatever you want just works. No need to be aware of styled-components from the user side at all.

Imagine Button being a styled component, all of the usual methods work perfectly fine:

    import Button from 'antd';

    <Button className="my-global-classname" />

    <Button style={{ color: 'red' }} />

You say "just" apply some global color overrides, but to "just" apply some global color overrides you need to use webpack (using another bundler? Sorry, antd is not for you) and use atool-build or have to configure webpack to work the way they need it to.

Or you create a custom less file, but that means you'll load all the styling for all components even though you really only wanted to use e.g. the Button.

That's not really "just" overriding a global color, is it? ;-)

I'm not saying this is a trivial change at all by the way, I understand the cost of it since I'm doing it for ElementalUI. I don't know if the antd maitainers will consider it worth it, that's another discussion.