是否可以覆盖 material-ui 组件的默认道具？答案

【问题标题】：Is it possible to override material-ui components default props?是否可以覆盖 material-ui 组件的默认道具？
【发布时间】：2019-12-13 00:39:07
【问题描述】：

假设我希望material-ui 中的每个Button 组件都具有variant="contained" color="secondary" 的默认道具。这可能吗？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

这是如何在 v4 中执行此操作的示例（v5 示例进一步向下）：

import React from "react";
import ReactDOM from "react-dom";

import {createMuiTheme, MuiThemeProvider, Button} from "@material-ui/core";

const theme = createMuiTheme({
  props: {
    MuiButton: {
      variant: "contained",
      color: "secondary"
    }
  }
});
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <Button>Props defaulted</Button>
    </MuiThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是一个类似的示例，但使用了 Material-UI v5 的主题结构：

import React from "react";
import ReactDOM from "react-dom";

import Button from "@mui/material/Button";
import { createTheme, ThemeProvider } from "@mui/material/styles";

const theme = createTheme({
  components: {
    MuiButton: {
      defaultProps: {
        variant: "contained",
        color: "secondary"
      }
    }
  }
});
function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button>Props defaulted</Button>
    </ThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：

【解决方案2】：

创建您自己的组件<MyButton />，它从material-ui 呈现<Button> 组件。根据需要设置组件样式并在代码中使用 MyButton。

【讨论】：

我想避免对我想要更改的每个组件都这样做
您是否可以选择使用 HOC（高阶组件）？
看起来没有选择做我想做的事，我将不得不接受你的解决方案
根据@Ryan Cogswell 的回答，似乎有办法：)

【解决方案3】：

如果我正确理解了这个问题，您必须在实例化主题时进行设置：

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      root: {
        fontSize: '1rem',
      },
    },
  },
});

【讨论】：

这不会覆盖backgroundColor 和其他被组件覆盖的道具