时间戳

首页 > 解决方案 > 如何在 Ant Design 中为现有属性添加额外的变量？

reactjs - 如何在 Ant Design 中为现有属性添加额外的变量？

问题描述

AntD 中的Button组件有一个type接受变量的属性primary dashed ghost danger。如何type=success在我的文件中添加使用特定颜色定义成功的位置.less？我不是指 AntD 的示例，他们指出如何修改预先存在的原色，而是创建一个新的原色。

标签： reactjsantd

解决方案

您可以创建一个新组件，该组件将使用 Ant Design 中的按钮组件。

import { Button } from 'antd';

const antdTypes = ['primary', 'dashed', 'ghost', 'danger'];

function ExtendedButton({ type, ...rest }) {
  if (antdTypes.inclues(type))
    return <Button type={type} {...rest} />
  else
    return <Button className={`button--${type}`} {...rest} />
}

例如，您将能够创建 CSS/LESS 类button--success，然后将类名的第二部分（来自 BEM 的 M）作为道具传递

推荐阅读