Is it possible to override material-ui components default props?
The documentation for this is here: https://material-ui.com/customization/globals/#default-props
Here is an example of how to do this in v4 (v5 example further down):
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);
Here's a similar example, but with the theme structure for v5 of Material-UI:
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);