Lets say I want every Button
component from material-ui
to have default props of variant="contained" color="secondary"
. Is this possible?
To override the styles of a specific part of the component, use the global classes provided by Material UI, as described in the previous section "Overriding nested component styles" under the sx prop section.
The logical OR operator || is used to set a fallback value for the version prop whenever it is not passed. A default value of 16 has been set for the version prop. With this change, everything now works as expected.
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With