问题[material-ui]

有一个输入类型元素，我想在悬停时改变它的笔画，但是它没有改变，你能告诉我改变它吗？悬停颜色

  MuiOutlinedInput: {
      styleOverrides: {
        root: {
          "& $notchedOutline": {
            borderColor: "#ff0000",
          },
          "&:hover $notchedOutline": {
            borderColor: "#ff0000",
          },
          "&$focused $notchedOutline": {
            borderWidth: 0,
          },
        },
      },
    },


import OutlinedInput from "@mui/material/OutlinedInput";

const Search = () => {
  return (
    <>
      <OutlinedInput />
    </>
  );
};

export default Search;

我正在使用具有自定义样式的 React 和 Mui Select。我不明白如何将道具投入这些风格。在此示例中，我将高度参数传递给 MuiSelect 组件，默认为 32px。Select 使用 sx={styles} 参数。我需要在样式对象中插入高度作为变量。怎么做？

import React, { useState } from 'react';
import Select, {SelectChangeEvent} from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

const options = [
  {id: '1', value: 'One'},
  {id: '2', value: 'Two'},
  {id: '3', value: 'Three'},
  {id: '4', value: 'Four'},
]

const styles = {
  width: '100%',
  border: '1px solid #D9D9D9',
  borderRadius: '16px',
  fontFamily: 'Montserrat',
  fontStyle: 'normal',
  fontWeight: 700,
  fontSize: '14px',
  color: '#5E5E5E',
  
  height: '40px',
}

interface IProps {
  height?: string;
}

const MuiSelect: React.FC<IProps> = ({height = '32px'}) => {
  const [value, setValue] = useState<string>('One');

  const handleChange = (e: SelectChangeEvent) => {
    setValue(e.target.value);
  }

  return (
      <Select
        value={value}
        onChange={handleChange}
        sx={styles}
      >
        {
          options.map(item => 
            <MenuItem 
              key={item.id} 
              value={item.value}
            >
              {item.value}
            </MenuItem>)
        }
      </Select>

  );
}

export default MuiSelect;