Javascript 使用材质UI创建自定义变体

我正在尝试为材质UI中的

按钮

组件创建自定义变体

我的第一步是根据

按钮创建一个具有我想要的样式的组件：

// CTA.js

import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  root: { // CUSTOM__STYLES },
  label: { // CUSTOM__STYLES },
});

const CTA = ({ children }) => {
  const classes = useStyles();

  return (
    <Button
      classes={{
        root: classes.root, 
        label: classes.label,
      }}
    >
      {children}
    </Button>
  );
};

现在，我想要的是能够导入新的
按钮
组件，并使其像常规的材质UI按钮组件一样工作，但添加了
variant=“cta”
。然而，它并不完全有效

例如，请看以下内容：

// Header.js
import { Button as MuiButton } from "@material-ui/core";
import { Button } from "@/theme/button.js";

...

<MuiButton variant="outlined">Mui Button</MuiButton>  // works
<Button variant="outlined">Button</Button> // does not work
<Button variant="cta">CTA Button</Button>  // works

//Header.js
从“@material ui/core”导入{Button as MuiButton}”；
从“@/theme/Button.js”导入{Button}；
...
Mui按钮//工作正常
按钮//不工作
CTA按钮//工作正常

我看到，当我使用
variant=“cta”
时，我的新自定义按钮组件可以工作，但当我使用任何内置材质UI变量选项时，它都不工作。我搞不懂那是什么。我本以为
会像
一样工作。但事实并非如此

你知道为什么不能以及如何修复它吗？
有两个选项是可能的，它不起作用，因为你破坏了“变体”，而不将它转发给你的MuiButton

您可以在Button.js中这样做

const Button = ({ variant, ...muiButtonProps }) => {
  if (variant === "cta") {
    return <CTA {...muiButtonProps} />;
  }
  return <MuiButton variant={variant} {...muiButtonProps} />;
};

在Material UI v5中，您可以使用
createMuiTheme（）
轻松为组件创建新的变体，这样就不需要创建包装器组件。以下是最起码的例子：

const theme=createMuiTheme({
组成部分：{
穆伊布顿：{
变体：[
{
道具：{变体：'虚线'}，
风格：{
textTransform:“无”，
边框：`2px虚线灰色${blue[500]}`，
},
},
],
},
},
});

导出默认函数Demo（）{
返回(
轮廓
冲刺
);
}

对于typescript用户，还需要使用模块扩充更新变量定义

声明模块'@material ui/core/Button'{
界面按钮OpsVariantOverrides{
虚线：正确；
}
}

现场演示
回答得很好——很遗憾我只能对你的答案投一次赞成票。谢谢。一个版本比另一个版本有优势吗（除了美观之外）？如果从性能角度来看，直接访问速度更快，如果是传输的（babel），则使用的内存比分解更少，但这是最小的。另见本帖
const Button = ({ variant, ...muiButtonProps }) => {
  if (variant === "cta") {
    return <CTA {...muiButtonProps} />;
  }
  return <MuiButton variant={variant} {...muiButtonProps} />;
};

const Button = (muiButtonProps) => {
  if (muiButtonProps.variant === "cta") {
    return <CTA {...muiButtonProps} />;
  }
  return <MuiButton {...muiButtonProps} />;
};

// Stage 4(finished) proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}