如何向“材料UI选择"选项添加图标? [英] How can I add an icon to Material UI Select options?

问题描述

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

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

完整的示例代码

  class IconInSelect扩展了组件{状态= {值:0};handleChange =名称=>事件=>{this.setState({[name]:event.target.value});};使成为() {const {value} = this.state;const {classes} = this.props;返回 (<选择autoWidth本国的值= {值}onChange = {this.handleChange("value")}name ="value"Variant ="filled"类别= {{根目录:classes.selectEmpty，选择:classes.select}}><选项值= {0}>&#xf083;项目一</option>< option value = {1}>< i class ="fas fa-expand"/>第二项</option><选项值= {2}>项目三</option></选择>);}} 

how to add icon inside Select options I made many tries none of them are working

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

full sample code

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 any help approached

解决方案

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

这篇关于如何向“材料UI选择"选项添加图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！