Remove blue outline from Select box React Material UI

Sunny Hebbar

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>
  );
}
Ryan Cogswell

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"
    },

Edit select-dropdown-hr7yx

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to change outline color of Material UI Select component (in outlined mode) when dropdown is opened ( currently it is blue )

How do I customize Material UI components (e.g. removing blue outline on Select component)?

How to remove curved border and inset box shadow from Material UI TextField React component?

How to set default value in material-UI select box in react?

How to remove blue outline of select option in Twitter Bootstrap

React How to remove the animation of Material-UI Select

Unable to Select options from select component using material ui react

Remove bounding box outline

React - Material UI: How to remove scrollbar from table

Remove padding from Material UI SwipeableViews React [SOLVED]

Xamarin forms: How to remove the blue box in ios when select that page from navigation drawer?

How to change outline color of Material UI React input component?

Material UI Selected Option Not Showing in Select Box

material-ui Select Box not showing selection

React Hooks : UseRef not recognizing Event from Material UI Select

How to remove left outline dotted line from inset box shadow?

Material Ui React - navbar not aligning box to right

setValue from material UI select

How to remove double box - Angular UI Select

how to remove the underline of material-ui select?

Kendo UI Grid Remove the Outline of an HTML Element from the PDF Export

How i can remove the blue border in Material React Modal?

How would i get the selected from my autocomplete box using material ui library in react

React Material UI ExpansionPanel Remove Borders

box-shadow weird behavior in Box component from Material UI

Button turns blue on press (not outline, not select highlight)

Material UI react select value is not clearing on backspace

react material-ui select not working

React render siblings on Multiple Select Material UI