是否可以覆盖material-ui组件的默认props？

Question

让我们说我希望Button中的每个material-ui组件都有默认的variant="contained" color="secondary"道具吗？

Answer 1

有关此文档，请参见：https://material-ui.com/customization/globals/#default-props

以下是如何执行此操作的示例：

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

Answer 2

创建自己的组件<MyButton />，该组件将渲染<Button>中的material-ui组件。根据需要对组件进行样式设置，并在代码中使用MyButton。

Answer 3

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

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