Closed stanlaktionov closed 1 year ago
<ConfigProvider
theme={{
token: {
fontFamily: 'xxx'
}
}}
>
{Your components}
</ConfigProvider>
Ref: https://ant.design/docs/react/customize-theme
May this help you.
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.
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
@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?
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.
@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
But library is compiled with wrong theme tokens
That's ok, tokens could be change during runtime with cssinjs.
We do not use cssinjs
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.
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.
are there any workarounds ? i am facing similar issues.
https://stackoverflow.com/questions/78437036/antd-theme-not-applying-consistently-to-all-components
@rpatidar Could you provide a codesandbox reproduce?
What is a solution of this problem?
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.
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