title: Remove blue outline from Select box React Material UI
body: <p>I'm using a React Material UI Select component in my project. I've managed to get most of the desired custom styles, but there is still a blue outline around the Select box when the dropdown paper is visible, or once an option has been selected and you move the mouse off the box (but it is still in focus). Which element do I need to target to remove the blue outline from the Select box? I've tried targeting various parts and using <code>outline: none</code> but I can't seem to find the solution. I've also read the React Material docs and searched Stackoverflow but can't find an answer. Any help would be much appreciated. Here is a demo of the Select box:</p>
  
  <p><a href="https://codesandbox.io/s/select-dropdown-hr7yx-hr7yx?file=/src/App.js" rel="noreferrer">https://codesandbox.io/s/select-dropdown-hr7yx-hr7yx?file=/src/App.js</a></p>
  
  <pre><code>import { makeStyles } from "@material-ui/core/styles";
  import React from "react";
  import "./styles.css";
  import FormControl from "@material-ui/core/FormControl";
  import Select from "@material-ui/core/Select";
  import MenuItem from "@material-ui/core/MenuItem";
  
  const useStyles = makeStyles(theme =&gt; ({
    quantityRoot: {
      color: "#FFFFFF",
      backgroundColor: "#303039",
      opacity: 0.6,
      borderRadius: "5px",
      "&amp;:hover": {
        backgroundColor: "#1E1E24",
        borderRadius: "5px",
        opacity: 1
      },
      "&amp;:focus-within": {
        backgroundColor: "#1E1E24",
        borderRadius: "5px",
        opacity: 1
      },
      "&amp; .MuiOutlinedInput-notchedOutline": {
        border: "1px solid #484850"
      },
      "&amp;:hover .MuiOutlinedInput-notchedOutline": {
        border: "1px solid #484850"
      },
      "&amp;.Mui-focused .MuiOutlinedInput-notchedOutline": {
        border: "1px solid #484850",
        borderRadius: "5px 5px 0 0"
      },
      "&amp; .Mui-disabled": {
        color: "#FFFFFF",
        opacity: 0.6
      },
      "&amp; .Mui-disabled .MuiOutlinedInput-notchedOutline": {
        border: "1px solid #484850"
      }
    },
    selectRoot: {
      color: "#FFFFFF"
    },
    icon: {
      color: "#FFFFFF"
    },
    selectPaper: {
      backgroundColor: "#1E1E24",
      border: "1px solid #484850",
      borderRadius: "5px",
      color: "#FFFFFF",
      "&amp; li:hover": {
        backgroundColor: "#303039"
      }
    }
  }));
  
  export default function App() {
    const classes = useStyles();
  
    return (
      &lt;div className="App"&gt;
        &lt;FormControl
          variant="outlined"
          classes={{
            root: classes.quantityRoot
          }}
        &gt;
          &lt;Select
            classes={{
              root: classes.selectRoot,
              icon: classes.icon
            }}
            MenuProps={{ classes: { paper: classes.selectPaper } }}
            inputProps={{
              name: "gpuChildQuantity",
              id: "gpuChildQuantity"
            }}
          &gt;
            {[...Array(8)].map((e, i) =&gt; {
              return (
                &lt;MenuItem key={i} value={i + 1}&gt;
                  {i + 1}
                &lt;/MenuItem&gt;
              );
            })}
          &lt;/Select&gt;
        &lt;/FormControl&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>