【总结】antd 渐变按钮代码解析

 为了便于代码管理，我将具体设置渐变组件的 css 部分单独放在了 gradientButton.css 文件中。

import React, { useContext } from 'react';
import { Button, ConfigProvider, Space } from 'antd';
import { AntDesignOutlined } from '@ant-design/icons';
import { css } from '@emotion/css';
import './gradientButton.css';

const App = () => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const rootPrefixCls = getPrefixCls();
   const linearGradientButton = css`
    &.${rootPrefixCls}-btn-primary:not([disabled]):not(.${rootPrefixCls}-btn-dangerous) {
      @apply gradient-button;
    }
  `;

  return (
    <ConfigProvider
    >
      <Space>
        <Button className={linearGradientButton} type="primary" size="large" icon={<AntDesignOutlined />}>
          Gradient Button
        </Button>
        <Button size="large">Button</Button>
      </Space>
    </ConfigProvider>
  );
};
export default App;

gradientButton.css 

.ant-btn-primary:not([disabled]):not(.ant-btn-dangerous) {
  border-width: 0;

  > span {
    position: relative;
  }

  &::before {
    content: '';
    background: linear-gradient(135deg, #6253e1, #04befe);
    position: absolute;
    inset: 0;
    opacity: 1;
    transition: all 0.3s;
    border-radius: inherit;
  }

  &:hover::before {
    opacity: 0;
  }
}

 

const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const rootPrefixCls = getPrefixCls();

这段代码使用了 React 的 useContext 钩子来访问 ConfigProvider 的上下文（Context）并获取了 Ant Design 的前缀类名（prefixCls）。

1. ConfigProvider.ConfigContext

• ConfigProvider 是 Ant Design 提供的一个组件，用于全局配置一些 Ant Design 组件的默认设置，如主题、语言、类名前缀等。
• ConfigContext 是由 ConfigProvider 提供的上下文，允许你在组件树中任意位置访问和使用这些全局配置。

2. useContext(ConfigProvider.ConfigContext)

• useContext 是 React 提供的一个钩子，用于在函数组件中访问上下文的值。
• 通过调用 useContext(ConfigProvider.ConfigContext)，你可以获取 ConfigProvider 提供的全局配置值。

3. getPrefixCls

• getPrefixCls 是 ConfigProvider 提供的一个方法，用于获取 Ant Design 组件的类名前缀（prefixCls）。
• 这个方法可以接受一个参数，通常是组件的名称（如 button），返回一个带有该组件名称的前缀类名（如 ant-btn）。如果不传递参数，则返回全局的前缀类名。

4. rootPrefixCls

• rootPrefixCls 是通过调用 getPrefixCls() 获取的全局前缀类名。
• 在 Ant Design 中，默认的前缀类名是 ant。所以通常 rootPrefixCls 的值会是 ant。

  const linearGradientButton = css`
    &.${rootPrefixCls}-btn-primary:not([disabled]):not(.${rootPrefixCls}-btn-dangerous) {
      @apply gradient-button;
    }
  `;

• css 函数：

  • 这是 @emotion/css 提供的函数，用于定义 CSS 样式。它允许你使用 JavaScript 字符串模板来编写 CSS 代码，并返回一个生成的类名。
  • 这个类名可以用于应用于组件或元素上，从而将定义的样式应用到这些元素上。

• ${rootPrefixCls}：

  • rootPrefixCls 是通过 ConfigProvider.ConfigContext 获取的全局前缀类名。它确保你在样式中使用的前缀类名是 Ant Design 配置的前缀类名。
  • 例如，如果 rootPrefixCls 的值是 ant，那么 ${rootPrefixCls}-btn-primary 就会变成 ant-btn-primary。

• 选择器：

  • &.${rootPrefixCls}-btn-primary:not([disabled]):not(.${rootPrefixCls}-btn-dangerous)：这个选择器选择具有特定类名的按钮。它选择：
    • 类名以 rootPrefixCls + -btn-primary 开头的按钮（例如 ant-btn-primary）。
    • 这些按钮不是被禁用的 (:not([disabled]))。
    • 这些按钮不具有 rootPrefixCls + -btn-dangerous 类名（例如 ant-btn-dangerous）。

• @apply 指令：

  • @apply 是 Tailwind CSS 的一个功能，用于将现有的 Tailwind CSS 工具类应用到自定义的 CSS 规则中。它可以简化样式的书写。
  • @apply gradient-button 表示将定义在其他地方的 gradient-button 类的样式应用到这个选择器上。注意：如果你没有使用 Tailwind CSS 或者 @apply 指令不被支持，这部分代码可能会引发错误。