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

Question

Lets say i want every Button component from material-ui to have a default props of variant=\"contained\" color=\"secondary\" is it pos

Answer 1

The documentation for this is here: https://material-ui.com/customization/globals/#default-props

Here is an example of how to do this:

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

Create your own component <MyButton /> which renders a <Button> component from material-ui. Style the component as you wish and use MyButton in your code.

Answer 3

If I understood the question correctly, you have to set that when you instantiate your theme :

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