Reactjs 如何更改材质界面选择边框和标签

我正在尝试从物料界面更改

选择
组件的边框。
到目前为止，我已经尝试：

const styles = theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap",
    backgroundColor: "lightgrey"
  },
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing.unit * 2
  },
  cssLabel: {
    color: "pink",
    "&$cssFocused": {
      color: "pink"
    }
  },
  cssFocused: {
    color: "pink"
  },
  underline: {
    "&:after": {
      borderBottom: "1px solid pink",
      borderTop: "1px solid pink"
    }
  }
});

我可以自定义
TextField
等，但很多小时后，我仍然无法自定义选择。我还试图传递一个
输入
，但是您必须自定义
输入
，这更糟糕

谁能帮我弄一下这个沙箱吗


非常感谢。
您可以覆盖子元素类的样式，例如

selectBorder: {
  '& .MuiOutlinedInput-notchedOutline': {
    borderColor: 'red'
  }
}

如果将
className={classes.selectBorder}
应用于
Select
组件，它会将边框颜色更改为红色。
下面是覆盖边框（
MuiOutlinedInput notketdoutline
）、标签（
MuiInputLabel root
）和选定项文本颜色的示例（
MuiOutlinedInput输入
）用于默认、悬停和聚焦状态

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: {
    width: 200,
    "& .MuiOutlinedInput-input": {
      color: "green"
    },
    "& .MuiInputLabel-root": {
      color: "green"
    },
    "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "green"
    },
    "&:hover .MuiOutlinedInput-input": {
      color: "red"
    },
    "&:hover .MuiInputLabel-root": {
      color: "red"
    },
    "&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "red"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-input": {
      color: "purple"
    },
    "& .MuiInputLabel-root.Mui-focused": {
      color: "purple"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "purple"
    }
  }
});

function App() {
  const [age, setAge] = React.useState("");
  const classes = useStyles();
  return (
    <div className="App">
      <TextField
        className={classes.root}
        value={age}
        onChange={e => setAge(e.target.value)}
        variant="outlined"
        label="My Label"
        select
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </TextField>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/styles”导入{makeStyles}”；
const useStyles=makeStyles({
根目录：{
宽度：200，
“&.muioOutlinedInput输入”：{
颜色：“绿色”
},
“&.MuiInputLabel根”：{
颜色：“绿色”
},
“&.MuiOutlinedInput root.MuiOutlinedInput槽口双线”：{
边框颜色：“绿色”
},
“&：hover.muioOutlinedInput输入”：{
颜色：“红色”
},
“&：hover.MuiInputLabel根”：{
颜色：“红色”
},
“&：hover.MuiOutlinedInput root.MuiOutlinedInput槽口doutline”：{
边框颜色：“红色”
},
“&.MuiOutlinedInput-root.Mui-focused.MuiOutlinedInput输入”：{
颜色：“紫色”
},
“&.MuiInputLabel root.Mui聚焦”：{
颜色：“紫色”
},
“&.MuiOutlinedInput-root.Mui-focused.MuiOutlinedInput槽口双线”：{
边框颜色：“紫色”
}
}
});
函数App（）{
const[age，setAge]=React.useState（“”）；
const classes=useStyles（）；
返回(
设置（如target.value）}
variant=“概述”
label=“我的标签”
选择
>
没有一个
十
二十
三十
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(

有关答案:




好的，在我的风格中，我把这个放在了主题中

MuiOutlinedInput: {
     root: {
         '&$focused $notchedOutline': {
         borderColor: 'inherit !important'
         }
     }
}

这似乎是个诀窍。它没有指向标签……但它指向了边界。我在这上面花了太多的时间。所以现在就可以了。
实际上，我想要的不是边界，但当我单击下拉菜单时，就是焦点边界。我可以在哪里获得我必须指向的类的名称？漂亮的答案。你是如何决定不这样做的o不要使用Select组件，也不要使用带有Select prop的文本字段组件，因为它更易于设置样式？感谢您的帮助
TextField
通常更易于使用，因为它负责确保
FormControl
、
InputLabel
、
Select
和一些可访问性的正确结构除非您需要自定义该结构，否则在使用较低级别的片段时，样式化方法将完全相同。然后，您可以将该类应用于
窗体控件
（这是由TextField呈现的）。