如何旋转Material-Ui select自定义图标，不变形，不可点击

Question

我正在尝试为 material ui select 组件实现我自己的图标。到目前为止，我已经成功地使用“IconComponent”MU select 属性更改了默认图标。

但是当菜单列表打开时，newIcon 不会旋转，就像默认图标的情况一样，而且，单击它时不会打开带有值的菜单。仅当我单击 select 组件本身而不是新图标时，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>

我也尝试过手动超速 select iconOpen class 以获得图标变换和旋转 180 度，（如本例）但它也没有用。

有谁知道为什么新图标不旋转以及如何解决这个问题，以及如何在单击新图标本身时打开菜单？

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

Answer 1

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

MUI 应用的样式控制 rotating the icon when the Select is open (via transform: 'rotate(180deg)') and also cause clicks to bypass the icon 并作用于下方的 Select（通过 pointerEvents: 'none'）。

您可以通过定义图标组件的方式来解决此问题，将其接收到的道具传播到 <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>
  );
}

如何旋转Material-Ui select自定义图标，不变形，不可点击

How to rotate Material-Ui select custom icon, it does not transform and is not clickable

javascript

css

svg

material-ui

icons