Question

AntD中的Button组件具有type的属性，该属性接受变量primary dashed ghost danger。如何添加type=success文件中的.less文件，其中将以特定颜色定义成功？我并不是在说AntD的示例，因为它们指出了如何修改现有的原色，而是创建了一种新的原色。

Answer 1

您可以创建一个新组件，该组件将使用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）作为prop传递

Answer 2

您也可以将其扩展为

import { Button as BaseButton, ButtonProps } from 'antd';
import { ButtonType as BaseButtonType } from 'antd/lib/button';
import React from 'react';

type ButtonType = BaseButtonType | 'success' | 'warning';

export default function Button(props: Omit<ButtonProps, 'type'> & React.RefAttributes<HTMLElement> & { type?: ButtonType }) {
  return <BaseButton {...(props as any)} />;
}

然后只有样式类 ant-btn-success, ant-btn-warning

如何在Ant Design的现有属性中添加其他变量？

2 个答案: