如何扩展 Material-UI Button 并创建自己的按钮组件答案

【问题标题】：How do I extend Material-UI Button and create my own button component如何扩展 Material-UI Button 并创建自己的按钮组件
【发布时间】：2021-04-27 11:17:50
【问题描述】：

我是 React 新手。使用 Material-UI / React，我如何创建自己的 Button 组件？理想情况下，我希望组件封装某些属性。

这是我的代码。

export const Button = withSytles((theme) => ({
    root: {
        backgroundColor: theme.palette.primary.main,
        minWidth: '100px',
    }
}))(MaterialButton);

但是，这段代码可以工作，当我使用 color="primary" 到 Material-UI Button 时，有没有办法让组件使用所有属性。我需要包含所有属性还是有更简单的方法。

另外，我确信使用100px 不是让该控件响应的正确方法。 100em 是正确的还是我应该使用不同的东西？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

这在 Material-UI v5 中是可能的，您可以为您的Button 创建一个custom variant。变体只是组件的特定样式，每个变体由一组组件道具标识。请看下面的例子：

const defaultTheme = createMuiTheme();

const theme = createMuiTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { color: "primary", variant: "contained" },
          style: {
            backgroundColor: defaultTheme.palette.primary.main,
            fontSize: 20,
            minWidth: "200px"
          }
        },
        {
          props: { color: "secondary", variant: "contained" },
          style: {
            backgroundColor: defaultTheme.palette.secondary.main
          }
        }
      ]
    }
  }
});

当你渲染这个组件时：

<Button color="primary" variant="contained">
  Primary
</Button>

使用上面指定的第一个变体样式，因为它们具有相同的道具：

{ color: "primary", variant: "contained" }

现场演示

【讨论】：

【解决方案2】：

您可以像@NearHuscarl 提到的那样创建自定义变体，也可以通过其他方式创建组件修改样式。

类似的东西。

import { makeStyles } from '@material-ui/core/styles'
import Button from '@material-ui/core/Button'
import PropTypes from 'prop-types'

const useStyles = makeStyles((theme) => ({
  root: {
    height: '48px',
    width: '100%',
    backgroundColor: '#232323',
    color: '#fff',
    fontSize: '16px',
    borderRadius: '4',
    minHeight: theme.spacing(6),
    '&:hover, &:active, &:focus': {
      backgroundColor: `rgba(0, 0, 0, 0.8)`,
    },
    '&.Mui-disabled': {
      opacity: 0.75,
    },
  },
}))

const propTypes = {
  loading: PropTypes.bool,
}

function PrimaryButton({ children, loading = false, ...props }) {
  const classes = useStyles()

  return (
    <Button
      variant="contained"
      className={classes.root}
      disabled={loading}
      {...props}
    >
      {children}
    </Button>
  )
}

PrimaryButton.propTypes = propTypes

export default PrimaryButton

创建代码沙箱

https://codesandbox.io/embed/boring-mayer-cjl0f?fontsize=14&hidenavigation=1&theme=dark

【讨论】：