Question

如何在“选择”选项内添加图标我做了很多尝试，但都没有用

 <option value={0}>&#xf083;Item One</option>
        <option value={1}>
          <i class="fas fa-expand" />
          Item two
        </option>

完整的示例代码

class IconInSelect extends Component {
  state = {
    value: 0
  };
  handleChange = name => event => {
    this.setState({ [name]: event.target.value });
  };
  render() {
    const { value } = this.state;
    const { classes } = this.props;
    return (
      <Select
        autoWidth
        native
        value={value}
        onChange={this.handleChange("value")}
        name="value"
        variant="filled"
        classes={{
          root: classes.selectEmpty,
          select: classes.select
        }}
      >
        <option value={0}>&#xf083;Item One</option>
        <option value={1}>
          <i class="fas fa-expand" />
          Item two
        </option>
        <option value={2}>Item three</option>
      </Select>
    );
  }
}

codesandbox 寻求帮助

Answer 1

使用MenuItem。

class IconInSelect extends Component {
  ...
  render() {
    return (
      <Select>
        <MenuItem value="">
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="Inbox" />
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    );
  }
}

Answer 2

这在不选择换行的情况下效果更好

Executing command (CWD): unzip -qq  '/var/www/html/legacy-app/vendor/aws/aws-sdk-php_compare/ba39e4a340165876e4355a19f89fe81f' -d '/var/www/html/legacy-app/vendor/composer/fd8c9a79'

只需在InboxIcon中使用自定义样式并根据需要设置边距

如何向“材料UI选择”选项添加图标？

2 个答案: