ConfigProvider for library based on antd

[stanlaktionov]

What problem does this feature solve?

We have 5 projects in mono repository. All projects are using library of components, built on top of antd. After migration to antd v5 we are facing a problem with overriding font family. Previously we used styles, applied for body element, which was inherited by the rest of components. But now, after v5 was released, font family (-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;) is specified almost per each component. Ant Design provides an ability to override font family in Config Provider with theme tokens. But in our case we do not have root component, because it is library, and each component is exported separately. Is there any way to specify theme overrides during the build, and avoid overriding font family for each component separately (either with <ConfigProvider or with css). Thank you!

What does the proposed API look like?

Some kind of webpack plugin, that accepts props, that will be overriden for theme

[MadCcc]

<ConfigProvider
  theme={{
    token: {
      fontFamily: 'xxx'
    }
  }}
>
  {Your components}
</ConfigProvider>

Ref: https://ant.design/docs/react/customize-theme

May this help you.

[MadCcc]

Personally I recommend you to wrap ConfigProvider in your own lib, and use it in your apps. In this way, you can simply proxy ConfigProvider for all your apps which depend on your lib.

Or using ConfigProvider in each application would be a good idea.

[futbolistua]

In this case, we need to wrap all Antd components inside our components lib and it's not flexible and not works as expected for libraries

[stanlaktionov]

@MadCcc

We have following structure: components/componentA components/componentB

and index.ts files with the following content

export from "./components/componentA"; export from "./components/componentB";

In your suggestion I have to wrap each component with <ConfigProvider> but I want to avoid it Any suggestions in my case?

[MadCcc]

In this case, we need to wrap all Antd components inside our components lib and it's not flexible and not works as expected for libraries

Sorry for my unclear answer. You can provide your own XXXConfigProvider in your lib:

export const XXXConfigProvider = (props) => (
  <ConfigProvider {...props} theme={{ ...props.theme, token: { ...props.theme.token, fontFamily: 'xxx' }}}>
    {props.children}
  </ConfigProvider>
);

And use it in your apps.

It's better to use ConfigProvider in apps only once than in lib with each component.

[stanlaktionov]

@MadCcc It's better to use ConfigProvider in apps only once than in lib with each component.

But library is compiled with wrong theme tokens

[MadCcc]

But library is compiled with wrong theme tokens

That's ok, tokens could be change during runtime with cssinjs.

[futbolistua]

We do not use cssinjs

[MadCcc]

We do not use cssinjs

Just use ConfigProvider in your apps, and the tokens in it like fontFamily will work for all the antd components in your app. You DO NOT need to use cssinjs or configure any other bundle tools, antd would take over this.

[zombieJ]

Follow up of @MadCcc 's topic. In our development, we have shared lib base on the antd which follow the antd theme.useToken for customize style usage. And additional create theme token package for different business line. This help the shared components can dynamic use in different design style business system and maintain the theme separated.

[rpatidar]

are there any workarounds ? i am facing similar issues.

https://stackoverflow.com/questions/78437036/antd-theme-not-applying-consistently-to-all-components

[afc163]

@rpatidar Could you provide a codesandbox reproduce?

[JaLe29]

What is a solution of this problem?

[theashishmaurya]

In this case, we need to wrap all Antd components inside our components lib and it's not flexible and not works as expected for libraries

Sorry for my unclear answer. You can provide your own XXXConfigProvider in your lib:

export const XXXConfigProvider = (props) => (
  <ConfigProvider {...props} theme={{ ...props.theme, token: { ...props.theme.token, fontFamily: 'xxx' }}}>
    {props.children}
  </ConfigProvider>
);

And use it in your apps.

It's better to use ConfigProvider in apps only once than in lib with each component.

If I do this In my main app the components which uses and theme are not updating or using the tokens.