使用Material-UI创建自定义变体 [英] Creating custom variants with Material-UI

问题描述

我正在尝试为Material-UI中的 Button 组件创建自定义变体.

I am trying to create custom variants for the Button component in Material-UI.

第一步是基于 Button 组件创建具有所需样式的组件:

My first step is to create a component based off of the Button component with the styles that I want:

// 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>
  );
};

然后我将该组件导入到我正在创建的新的 Button 组件中，如下所示:

I then import that component into a new Button component that I am creating as follows:

// Button.js
import MuiButton from "@material-ui/core/Button";
import CTA from "./CTA";

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

现在，我想要的是能够导入新的 Button 组件并使它像常规的Material-UI按钮组件一样工作，但是要添加 variant ="; cta" .但是，它并不完全有效.

Now, what I want is to be able to import my new Button component and have it work just like a regular Material-UI button component, but with the addition of variant="cta". However, it does not quite work.

例如，看看以下内容:

// 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

我看到当我使用 variant ="cta" 时，新的自定义Button组件可以工作，但是当我使用任何内置的Material-UI变体选项时，它不起作用.我不知道那是什么.我本以为< Button变量=概述" 可以像< MuiButton variant =概述" 一样工作.但是事实并非如此.

I see that my new custom Button component works when I use variant="cta", but it does not work when I use any of the built-in Material-UI variant options. I cannot figure out what that is. I would have thought that <Button variant="outlined"> would work just like <MuiButton variant="outlined">. But that is not the case.

有人知道为什么不这样做以及如何解决它吗?

Any idea why not and how to fix it?

推荐答案

可能有两种选择，因为您破坏了"variant"变量，所以这两种方法都不起作用.并且不要将其转发到您的MuiButton.

Two options are possible, it dont work cause you destruct "variant" and don't forward it to your MuiButton.

您可以在Button.js中这样做

You can do it this way in your Button.js

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} />;
};

看看文档: https://developer.mozilla.org/zh-美国/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

// 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}

这篇关于使用Material-UI创建自定义变体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！