reactjs - Global outlined override

Question

In what way can I override global theme such that all components that are using variant = 'outlined' are impacted by that style. Also would like to override events like focus, hover, etc..

 "@material-ui/core": "^3.9.2",

Answer 1

Offhand, I'm not certain how many different components have an "outlined" variant. You won't be able to address all of them in a single CSS rule, but they can each be dealt with separately in your theme.

In this answer I will just address OutlinedInput and outlined Button. If you have questions about overriding styles for other components, please create a more specific question showing what you tried.

The documentation for customizing all instances of a component type is here: https://material-ui.com/customization/themes/#customizing-all-instances-of-a-component-type.

The next resource is to look at the CSS portion of the API documentation for the component you want to override. For instance the Button documentation is here: https://material-ui.com/api/button/#css.

At the bottom of the CSS documentation will be a line like the following in Button:

If using the overrides key of the theme, you need to use the following style sheet name: MuiButton.

Similarly, here is the link for OutlinedInput: https://material-ui.com/api/outlined-input/#css

For some customizations, you may need to look at how the default styles are defined in the source code in order to understand how to override them properly.

Here is an example showing customizations of OutlinedInput and Button. I have also included non-outlined versions just to show that they are unaffected by the customizations in the theme.

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
const theme = createMuiTheme({
  overrides: {
    MuiOutlinedInput: {
      root: {
        "& $notchedOutline": {
          borderColor: "green"
        },
        "&$focused $notchedOutline": {
          borderColor: "orange"
        },
        color: "purple"
      },
      notchedOutline: {}
    },
    MuiButton: {
      outlined: {
        borderColor: "purple",
        color: "red"
      },
      outlinedPrimary: {
        borderColor: "brown"
      }
    }
  }
});
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <TextField variant="outlined" defaultValue="My Text" />
      <br />
      <br />
      <TextField defaultValue="Not customized" />
      <br />
      <br />
      <Button variant="outlined">Outlined Button</Button>
      <br />
      <br />
      <Button color="primary" variant="outlined">
        Outlined Button - Primary
      </Button>
      <br />
      <br />
      <Button>
        Text Button - unaffected by customization to outlined button
      </Button>
    </MuiThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Related answer: Change outline for OutlinedInput with React material-ui