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>
);
}
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"
},
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments