材质用户界面ExpandMoreOutlined图标无法提供确切的填充

Question

我正在使用ExpandMoreOutlined组件在选择的组件上显示箭头。我想要为图标添加一些填充。所以我像下面使用paddingRight给出了：

import React, { useState, RefObject } from 'react';
import { Select as MuiSelect, MenuItem, OutlinedInput } from '@material-ui/core';
import ExpandMoreOutlined from '@material-ui/icons/ExpandMoreOutlined';

const MyExpandMoreOutlined = styled(ExpandMoreOutlined)({
color: colorPalette.primary[0].interaction,
paddingRight: '20px'
});

<MuiSelect value={value}
id="storyBookSelect"
onChange={handleChange}
IconComponent={MyExpandMoreOutlined}
className={classes.select}
input={}
MenuProps={{
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
},
transformOrigin: {
vertical: "top",
horizontal: "left"
},
getContentAnchorEl: null
}}
>
{menuItems}

但是当我单击选择以选择一个selectItem时。向下箭头图标变为向上箭头。而我在右侧提供的填充将应用于左侧。

似乎有一个错误。

Answer 1

这不是错误；这只是它设计工作的方式。打开选择后的图标gets rotated 180 degress。当您将填充作为图标的一部分时，填充也会旋转。

如果您不希望旋转，则可以覆盖如下所示的变换：

import React from "react";
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import { styled } from "@material-ui/core/styles";
import ExpandMoreOutlined from "@material-ui/icons/ExpandMoreOutlined";

const MyExpandMoreOutlined = styled(ExpandMoreOutlined)({
  color: "green",
  paddingRight: "20px",
  "&.MuiSelect-iconOpen": {
    transform: "none"
  }
});
export default function App() {
  const [value, setValue] = React.useState("");
  return (
    <TextField
      SelectProps={{ IconComponent: MyExpandMoreOutlined }}
      select
      label="Sample"
      value={value}
      onChange={e => setValue(e.target.value)}
      variant="outlined"
      style={{ width: "200px" }}
    >
      <MenuItem value="1">Option 1</MenuItem>
      <MenuItem value="2">Option 2</MenuItem>
    </TextField>
  );
}

---

如果要旋转和填充，则只需翻转旋转案例的填充：

const MyExpandMoreOutlined = styled(ExpandMoreOutlined)({
  color: "green",
  paddingRight: "20px",
  "&.MuiSelect-iconOpen": {
    paddingRight: 0,
    paddingLeft: "20px"
  }
});