如何使用antd的ConfigProvider的token能力修改ProComponents的主题色

[hsulei]

🧐 问题描述

更新antd5.0和ProComponents2.0 使用antd中的ConfigProvider 定义theme token 无法影响ProTable 中的按钮主题色，如何通过ConfigProvider修改ProComponents的主题色？

💻 示例代码

 <ConfigProvider locale={zhCN} theme={{ token: { colorPrimary: '#7ED321', borderRadius: 4 } }}>
        <ConfigProviderWrap>
          <RouterProvider router={router} />
        </ConfigProviderWrap>
      </ConfigProvider>

🚑 其他信息

"antd": "^5.0.1", "@ant-design/pro-components": "^2.3.34", "vite": "^3.0.0"

[github-actions[bot]]

当前 Issue 未检测到标题，请规范填写，谢谢！

The title of the current issue is not detected, please fill in according to the specifications, thank you!

[XuJin186]

等待解决 我也遇到了

[hs-ltbyce]

也有同样问题

[Teeoo]

<ConfigProvider
        theme={{
            token: {
                colorPrimary: '#5A54F9'
            }
        }}
    >
        <Outlet />
</ConfigProvider>

好像没啥问题,正常显示

[hs-ltbyce]

@Teeoo 不行吧，colorPrimary改的只是antd的seedToken ，而pro本来就是基于antd开发的上层组件，所以看起来是有效的。但是它内部还有很多自定义样式，没有办法通过token进行修改。

[hsulei]

我使用ConfigProvider 只是改变了单独的Antd组件， ProTable这些pro-components中的按钮主题色是不能改变的

[Teeoo]

0.0 有可能我们说的按钮不是一个东西 我说的按钮是toolBarRender中的东西你们说的是啥

[hsulei]

@Teeoo 你的能变色？ 我ProTable中的toolBarRender 不行啊， search中的按钮也不行

[hsulei]

@Teeoo 还是说我ConfigProvider放的位置不对？

[Teeoo]

可以啊

[hsulei]

@Teeoo 我那样写法没有效果啊，组件版本应该都是对的啊

[hsulei]

@Teeoo 很奇怪， 我是吧ConfigProvider加在上的，LoginFormPage的主题色可以改变，但ProTable里面的主题色改不了，需要再改外面再包一个

[KarasuShin]

import { ConfigProvider } from 'antd'

 <ConfigProvider theme={{
      token: {
        colorPrimary: palette.primary,
        colorPrimaryHover: palette['primary-5'],
      },
    }}>
    <RouterProvider router={routes} />
  </ConfigProvider>

我通过这种方式传递token，ProTable组件里colorPrimaryHover生效了，但是colorPrimary未生效

[hsulei]

不知道是不是ProLayout里是不是又干了啥，我要在ProLayout中在加一个ConfigProvider才有用

[Teeoo]

[hsulei]

@Teeoo 没用umi..

[Teeoo]

应该和umi没啥关系吧

[hsulei]

[Teeoo]

啊这.... 不清楚啥情况你这块是写哪的？(这是gql项目么0.0

[hsulei]

@Teeoo 你的这个配置，是在ProLayout的children里面的吧？

[Teeoo]

新建的layout

[hsulei]

@Teeoo 有用ProLayout吗？

[Teeoo]

"dependencies": {
    "@ant-design/icons": "^4.8.0",
    "@ant-design/pro-components": "^2.3.35",
    "@lottiefiles/react-lottie-player": "^3.4.9",
    "@umijs/max": "^4.0.33",
    "ahooks": "^3.7.2",
    "antd": "^5.0.2",
    "crypto-js": "^4.1.1",
    "fuzzy": "^0.1.3",
    "inquirer-autocomplete-prompt": "^3.0.0",
    "lodash": "^4.17.21",
    "nunjucks": "^3.2.3",
    "qiniu-js": "^3.4.1",
    "typed.js": "^2.0.12",
    "umi-presets-pro": "^1.0.8"
  }

[hsulei]

不是这个，我的layout组件里面是 然后ConfigProvider是在这个ProLayout组件外面的

[hs-ltbyce]

@hsulei 因为 ProConfigProvider 是这样搞得： path: packages\provider\src\index.tsx

  return (
    <AntdConfigProvider {...configProvider}>
      <ConfigProVoidContainer {...props} token={token} />
    </AntdConfigProvider>
  );

昨天看了一下源码, pro里面自己写了一套defaultToken,默认使用了antd的defaultAlgorithm算法作为缺省，目前确实是不支持用antd的token packages\provider\src\useStyle\token.ts

export const defaultToken = {
customToken,
...(theme?.defaultAlgorithm?.(theme?.defaultSeed) as any),
...
}

[Teeoo]

你在不受影响的地方单独套个ConfigProvider生效不？

[hsulei]

那需要再ProLayout里面在包一下了

[chenshuai2144]

我修复了一下这个问题，发完版本就可以完美使用了

[XuJin186]

我修复了一下这个问题，发完版本就可以完美使用了

坐等更新

[XuJin186]

@chenshuai2144 这是啥奇葩设计？ algorithm: dark ?? proProvide.dark ? darkAlgorithm : defaultAlgorithm, https://github.com/ant-design/pro-components/blob/0044bcdba504f4c7c610a9d3720995a4d4d40460/packages/provider/src/index.tsx#L465

除了dark我不能设置别的了嘛？compact和dark一起用不行嘛

[hsulei]

2.3.36?

[XuJin186]

2.3.36?

是的

[hsulei]

@XuJin186 我指的是说修复的版本，我更新了还是不行么

[XuJin186]

本质上ant的Provide和pro的Provide 用户自己都要去配置,现在这个设计更偏向umi 一个dark属性搞定

[hsulei]

我指定Provider的primaryColor值， 还是无法影响ProLayout中的antd组件样式

[XuJin186]

的确无效

[hooliy]

解决了吗？在config下配置token不生效

[hsulei]

没得，现在我的做法 在PayLayout里面再写一遍

[hooliy]

刚发的 2.3.42 版本解决了，已经支持 configProvider 配置了，但是 theme 配置方法还不支持，不过已经很好了

[hsulei]

#7ED321

我试试看

[hooliy]

@hsulei 切换到国外源，淘宝源还没同步

[XuJin186]

现在的本质就是pro版本根本没用antd token那一套 感觉还在兼容antd4的写法 我理想状态就是pro引用绝大部分antd的token 自己只定义一些必要的token 那这样antd设置为dark pro也会跟着变

[XuJin186]

官方的demo也出现了一定的问题

[Thyiad]

#7ED321

我试试看

Hi，请问你最后怎么解决的？

[iCyris]

问题依旧存在...

不引入 Pro 组件的情况下，Button 的样式是正常的；但只要引入了 Pro 组件，用 ConfigProvider theme token 配置的形式配置的主题就会失效，会被 Pro 的样式资源覆盖掉。

import { ConfigProvider, Button } from 'antd';
import { ProTable } from '@ant-design/pro-components'; // 去掉这行，Button 的样式就是正常的

const THEME_CONFIG = {
    token: {
      colorPrimary: '#4f84cf',
      colorBgContainer: '#fffffe',
      borderRadius: 4,
      wireframe: true,
    },
  };

export default () => {
  return (
      <ConfigProvider theme={THEME_CONFIG}>
        <Button>xxx</Button>
        <ProTable {...} />
      </ConfigProvider>
  )
}