In v5, cannot define primary Buttons background (limited to background-color)

[TdyP]

What problem does this feature solve?

In antd v5, I would like to be able to use a gradient for the background of my primary Button. For example: transparent linear-gradient(180deg, #2CCEFF 0%, #0A8EE0 100%) 0% 0% no-repeat padding-box

I'm able to change background color using a custom theme: changing the colorPrimary token define on components.Button is working. The problem is this token is affected to the background-color property in CSS, thus using a gradient is not working here. (see source code)

What does the proposed API look like?

It would be nice to have access to the background property, instead of the background-color or via another token to be able to have more flexibility on backgrounds.

[github-actions[bot]]

Hello @TdyP. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @TdyP，我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

[Wxh16144]

我想尝试修复这个问题，可能不仅仅是 Button 有这个问题，其他组件类似的场景应该还有🤔。

应该换一种方式去实现，colorPrimary 仅仅是颜色相关的值。

[MadCcc]

改成 background 就好了，已经有相关 PR。 There has been PR to replace all background-color to background. https://github.com/ant-design/ant-design/pull/38644

[MadCcc]

But it seems cssinjs transformer could solve this problem quickly.

[MadCcc]

const transform: Transformer = {
  visit: (cssObj) => {
    if ('backgroundColor' in cssObj) {
      const clone: CSSObject = { ...cssObj };
      clone.background = clone.backgroundColor;
      delete clone.backgroundColor;
      return clone;
    }
    return cssObj;
  },
};

Try to add this transformer to StyleProvider.

[shahbazshueb]

const transform: Transformer = {
  visit: (cssObj) => {
    if ('backgroundColor' in cssObj) {
      const clone: CSSObject = { ...cssObj };
      clone.background = clone.backgroundColor;
      delete clone.backgroundColor;
      return clone;
    }
    return cssObj;
  },
};

Try to add this transformer to StyleProvider.

Thanks @MadCcc . This works like a charm. However, whenever I set colorPrimary to a gradient color, it gets reset to #ffff. Any workaround for it?