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

Question

假设我希望每个Button组件material-ui都具有variant="contained" color="secondary". 这可能吗？

标签： reactjsmaterial-ui

Answer 1

相关文档在这里：https ://material-ui.com/customization/globals/#default-props

以下是如何在 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);