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

Question

我使用 Material-ui v5 进行学习。我在覆盖 mui Select 组件的默认样式时遇到困难。我想在将鼠标悬停在 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

首先：

\n

\n

@mui/styles 是 MUI 的遗留样式解决方案。它依赖于 JSS 作为样式解决方案，@mui/material 中不再使用 JSS，在 v5 中已弃用。如果您不想在捆绑包中同时包含情感和 JSS，请参阅 @mui/system 文档，这是推荐的替代方案。

\n

\n

您可以在此处查看更多信息。因此，对于定制，您可能应该使用 styled-components。

\n

Select组件MUI使用其后面的输入字段，并且要完成您想要的操作，您需要自定义input，这就是您使用.MuiOutlinedInput-root类的原因。这里有MUI一些input自定义示例。

\n

这里\xc2\xb4s 是一个自定义Select示例：

\n

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

\n