Remove blue outline from Select box React Material UI

Question

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 outline: none 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:

https://codesandbox.io/s/select-dropdown-hr7yx-hr7yx?file=/src/App.js

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 => ({
  quantityRoot: {
    color: "#FFFFFF",
    backgroundColor: "#303039",
    opacity: 0.6,
    borderRadius: "5px",
    "&:hover": {
      backgroundColor: "#1E1E24",
      borderRadius: "5px",
      opacity: 1
    },
    "&:focus-within": {
      backgroundColor: "#1E1E24",
      borderRadius: "5px",
      opacity: 1
    },
    "& .MuiOutlinedInput-notchedOutline": {
      border: "1px solid #484850"
    },
    "&:hover .MuiOutlinedInput-notchedOutline": {
      border: "1px solid #484850"
    },
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      border: "1px solid #484850",
      borderRadius: "5px 5px 0 0"
    },
    "& .Mui-disabled": {
      color: "#FFFFFF",
      opacity: 0.6
    },
    "& .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",
    "& li:hover": {
      backgroundColor: "#303039"
    }
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <FormControl
        variant="outlined"
        classes={{
          root: classes.quantityRoot
        }}
      >
        <Select
          classes={{
            root: classes.selectRoot,
            icon: classes.icon
          }}
          MenuProps={{ classes: { paper: classes.selectPaper } }}
          inputProps={{
            name: "gpuChildQuantity",
            id: "gpuChildQuantity"
          }}
        >
          {[...Array(8)].map((e, i) => {
            return (
              <MenuItem key={i} value={i + 1}>
                {i + 1}
              </MenuItem>
            );
          })}
        </Select>
      </FormControl>
    </div>
  );
}

Answer 1

You just have a slight problem with your override of the "focused" styles.

You had:

    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      border: "1px solid #484850",
      borderRadius: "5px 5px 0 0"
    },

But Mui-focused is being added to a child of the FormControl rather than the FormControl itself (where this class is being applied), so &.Mui-focused doesn't ever match anything. Instead you need this to be similar to your override of the "disabled" styles. You need a space after the ampersand so that .Mui-focused targets a descendant of the FormControl:

    "& .Mui-focused .MuiOutlinedInput-notchedOutline": {
      border: "1px solid #484850",
      borderRadius: "5px 5px 0 0"
    },

Answer 2

Thanks it's nice answer , for the others who like want it for Grid to use in Next.js or css without sass or scss can be use this code :

.MuiDataGrid-root .MuiDataGrid-columnHeader:focus,
.MuiDataGrid-root .MuiDataGrid-cell:focus {
     outline: none;
}

Answer 3

A really simple fix to remove all borders from mui Select dropdown.

Target the .CSS file fieldset tag:

/* my css file */ 

fieldset{
    border: none !important;
    outline: none !important;
}

/* Don't forget to: import './mycssfile.css'; into your .js/jsx file

Although CSS styling and the !important tag is considered messy, this is the only way I debugged the issue. Spent far too long targeting styles, classes and global mui css classes in my .jsx files with no solution.

Answer 4

You can also add variant attribute to get rid of the outline:

<Select variant="standard">

Answer 5

It's late, but still,

States like hover, focus, disabled and selected, are styled with a higher CSS specificity. To customize them, you'll need to increase specificity.

.Button {
  color: black;
}

/* Increase the specificity */
.Button:disabled {
  color: white;
}

<Button disabled className="Button">

Here is Material UI docs about this problem.