更改 Material UI Select 组件边框的颜色不起作用

Question

我正在使用 material-ui v5 进行学习。我在覆盖 mui Select 组件的默认样式时遇到困难。我想在将鼠标悬停在 Select 上方以及处于聚焦状态时更改它的颜色。目前聚焦状态的颜色是这样的

这是我的代码：

import { useState, useEffect } from 'react';
import { makeStyles } from '@mui/styles';
import { Select, MenuItem } from '@mui/material';

const useStyles = makeStyles({
    select: {
     '&.MuiOutlinedInput-root': {
       width: '200px'
     },
    '& .MuiOutlinedInput-notchedOutline': {
        borderColor: 'red',
          '&:hover': {
          borderColor: 'green'
        }
     },

    }
})

function App() {
  const classes = useStyles();
  const [age, setAge] = useState('');

  const handleChange = (event: SelectChangeEvent) => {
    setAge(event.target.value);
  };
  return (
        <Select
          variant="outlined"
          className={classes.select}
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
  );
}

export default App;

如有任何帮助，我们将不胜感激。

Answer 1

首先：

@mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the @mui/material anymore, deprecated in v5. If you don't want to have both emotion & JSS in your bundle, please refer to the @mui/system documentation which is the recommended alternative.

您可以查看更多here. So for customization, you should probably go with styled-components。

Select MUI 中的组件使用它后面的输入字段，要完成你想要的，你需要自定义 input 这就是你使用 .MuiOutlinedInput-root 的原因class。因此，MUI 有一些 input 自定义示例 here。

这是一个自定义 Select 示例：

const CustomSelect = styled(Select)(() => ({
  width: 300,
  "&.MuiOutlinedInput-root": {
    "& fieldset": {
      borderColor: "red"
    },
    "&:hover fieldset": {
      borderColor: "yellow"
    },
    "&.Mui-focused fieldset": {
      borderColor: "green"
    }
  }
}));

更改 Material UI Select 组件边框的颜色不起作用

Change color of Material UI Select component border not working

javascript

css

reactjs

material-ui