Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to override material-ui components default props?

Lets say I want every Button component from material-ui to have default props of variant="contained" color="secondary". Is this possible?

like image 278
Asaf Aviv Avatar asked Aug 05 '19 13:08

Asaf Aviv


People also ask

How do you override material UI components?

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.

How do I change the default value of props?

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.


1 Answers

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

Edit default props


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

Edit default props

like image 155
Ryan Cogswell Avatar answered Oct 10 '22 02:10

Ryan Cogswell