Javascript 如何旋转MaterialUi Select 自定义图标，它不变形，不可点击

您指定的图标组件(() => <div className="test">{newIcon}</div>)会忽略传递给它的所有props .这意味着它不会收到任何MUItry 应用到它的样式.

当 Select 打开(通过transform: 'rotate(180deg)')时，MUI应用的样式控制rotating the icon，也会导致clicks to bypass the icon，并在下面的 Select 上起作用(通过pointerEvents: 'none').

您可以通过定义图标组件，将其接收的props 扩散到<svg>元素上，来解决这个问题:

const NewIcon = (props) => (
  <svg
    {...props}
    width="38"
    height="38"
    viewBox="0 0 38 38"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect x="0.5" y="0.5" width="37" height="37" rx="9.5" stroke="#222426" />

    <svg
      width="18"
      height="12"
      x="10"
      y="13"
      viewBox="0 0 18 12"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M0.66732 0.999999L8.72964 10.8681C8.76363 10.9095 8.80536 10.9428 8.85208 10.9655C8.89879 10.9882 8.94943 11 9.00065 11C9.05187 11 9.10251 10.9882 9.14922 10.9655C9.19594 10.9428 9.23767 10.9095 9.27167 10.8681L17.334 1"
        stroke="#222426"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </svg>
);

然后将其指定为IconComponent={NewIcon}，无需进一步包装.

以下是您的Sandbox 的修改版本:

import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";

const NewIcon = (props) => (
  <svg
    {...props}
    width="38"
    height="38"
    viewBox="0 0 38 38"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect x="0.5" y="0.5" width="37" height="37" rx="9.5" stroke="#222426" />

    <svg
      width="18"
      height="12"
      x="10"
      y="13"
      viewBox="0 0 18 12"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M0.66732 0.999999L8.72964 10.8681C8.76363 10.9095 8.80536 10.9428 8.85208 10.9655C8.89879 10.9882 8.94943 11 9.00065 11C9.05187 11 9.10251 10.9882 9.14922 10.9655C9.19594 10.9428 9.23767 10.9095 9.27167 10.8681L17.334 1"
        stroke="#222426"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </svg>
);

export default function BasicSelect() {
  const [age, setAge] = React.useState("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          sx={{ "& .MuiSelect-icon": { top: 10 } }}
          onChange={handleChange}
          IconComponent={NewIcon}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
}