Material ui update select style globally with theme

Question

I am trying to use the following to update the border color of all of my outlined select, but it doesn't work (apparently the style of the border comes from fieldset element). I have tried MuiOutlinedInput but that applies tom all of the inputs. Is there a way to target just the select outlined variant?

  overrides: {
    MuiButton: {
      outlined: {
        '&:hover': {
          boxShadow: 'none'
        },
      },
      contained: {
        '&:hover': {
          boxShadow: 'none'
        },
      }
    },
    MuiSelect: {
      root: {
        '& $notchedOutline': {
          borderColor: 'red',
        },
      }
    }
  }

score 1 · Accepted Answer · answered Feb 19 '20 at 16:11

The problem with what you tried is that the $notchedOutline element is not a descendant of the .MuiSelect-root element, but rather a sibling. The overall structure of the outlined select is roughly as follows (with less relevant details left out):

<div class="MuiFormControl-root">
   <div class="MuiOutlinedInput-root">
      <div class="MuiSelect-root MuiSelect-outlined MuiOutlinedInput-input">Displayed Text</div>
      <input type="hidden" value="Displayed Text">
      <fieldset class="MuiOutlinedInput-notchedOutline"><legend>less relevant details</legend></fieldset>
   </div>
</div>

Below is an example that customizes both outlined input and outlined select using different colors.

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
const theme = createMuiTheme({
  overrides: {
    MuiOutlinedInput: {
      root: {
        "& $notchedOutline": {
          borderColor: "pink"
        },
        "&$focused $notchedOutline": {
          borderColor: "red"
        },
        color: "blue",

        "& .MuiSelect-root ~ $notchedOutline": {
          borderColor: "green"
        },
        "&$focused .MuiSelect-root ~ $notchedOutline": {
          borderColor: "orange"
        },
        "& .MuiSelect-root": {
          color: "purple"
        }
      }
    }
  }
});
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <TextField
        variant="outlined"
        label="Outlined Input"
        defaultValue="My Text"
      />
      <br />
      <br />
      <TextField
        variant="outlined"
        label="Outlined Select"
        select
        value="My Text 1"
      >
        <MenuItem value="My Text 1">My Text 1</MenuItem>
        <MenuItem value="My Text 2">My Text 2</MenuItem>
      </TextField>
    </MuiThemeProvider>
  );
}

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

Material ui update select style globally with theme

2 Answers2