reactjs - 从选择框 React Material UI 中删除蓝色轮廓

问题描述

我在我的项目中使用了 React Material UI Select 组件。我已经设法获得了大多数所需的自定义样式，但是当下拉文件可见时，选择框周围仍然有一个蓝色轮廓，或者一旦选择了一个选项并将鼠标移出框（但它是仍然是焦点）。我需要定位哪个元素才能从“选择”框中删除蓝色轮廓？我尝试过针对各个部分并使用outline: none，但似乎找不到解决方案。我还阅读了 React Material 文档并搜索了 Stackoverflow，但找不到答案。任何帮助将非常感激。这是选择框的演示：

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

标签： reactjsmaterial-ui

您对“重点”样式的覆盖只是有一点问题。

你有过：

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

但是Mui-focused被添加到的一个孩子FormControl而不是它FormControl本身（这个类被应用的地方），所以&.Mui-focused永远不会匹配任何东西。相反，您需要这类似于您对“禁用”样式的覆盖。您需要在 & 号之后有一个空格，以便.Mui-focused针对的后代FormControl：

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

reactjs - 从选择框 React Material UI 中删除蓝色轮廓

问题描述

解决方案

推荐阅读