如何旋转Material-Ui选择自定义图标，它不变形且不可点击

Question

我正在尝试为材质 ui 选择组件实现我自己的图标。到目前为止，我已经设法使用“IconComponent”MU 选择属性更改默认图标。

但是，在打开菜单列表时，newIcon 不会旋转，就像默认图标的情况一样，而且，单击它时，带有值的菜单不会打开。仅当我单击选择组件本身而不是新图标时，才会出现 ListIteam。

我测试了两个不同的图标（anotherIcon 和 newIcon），问题仍然存在。

const newIcon = (
  <svg
    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>
);

      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
          IconComponent={() => <div className="test">{newIcon}</div>}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>

我还尝试手动超速选择 iconOpen 类以获得图标变换并旋转 180 度（如在本例中React JS Material UI Select IconComponent (Dropdown Icon) 避免旋转），但它也不起作用。

任何人都知道为什么新图标不旋转以及如何解决此问题，以及在单击 newIcon 本身时打开菜单？

这是演示：https://codesandbox.io/s/basicselect-material-demo-forked-d946k1? file=/demo.js

Answer 1

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

MUI 应用的样式控制在选择打开时旋转图标transform: 'rotate(180deg)'（通过），并且还会导致单击绕过图标并作用于下面的选择（通过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}。

这是沙箱的修改版本：

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>
  );
}