Reactjs 反应材质UI自动完成突出显示结果中搜索的文本

我正在使用ReactJS项目中MaterialUIV0.20.0组件库中的Autocomplete组件。我尝试过为这个功能找到一个实现，但没有遇到一个好的例子。我希望能够突出显示/格式化用户在搜索结果中输入的文本，类似于所附图像。

---

如果您使用的是Material ui v0.xx，请查看以下示例

要将样式应用于用户输入的文本，必须使用inputStyle道具，如下所示

此外，我还提到了浮动标签、下划线、提示文本等其他样式，这些样式可能对社区有所帮助

 const styles = {
    floatingSearchLabelStyle: {
      color: '#fff',
      fontFamily: 'Open Sans","Helvetica Neue",Helvetica,Arial,"Lucida Grande'
    },
    inputSearchStyleText: {
      color: '#fff'
    },
    underlineSearchStyle : {
      borderColor: '#fff'
    },
    hintSearchStyle: {
      color: '#fff'      
    }
}
<AutoComplete
      floatingLabelText="Search people"
      hintText="Search with name"
      dataSource = {dataSource}
      style={{marginTop: '-20px'}}
      maxSearchResults={10}
      anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}
      animated={true}
      onNewRequest= {this.handleNewRequest}
      onUpdateInput={this.handleUpdateInput}
      filter={AutoComplete.fuzzyFilter}        
      inputStyle={styles.inputSearchStyleText} 
      underlineStyle={styles.underlineSearchStyle} 
      underlineFocusStyle={styles.underlineSearchStyle} 
      hintStyle={styles.hintSearchStyle} 
      floatingLabelStyle={styles.floatingSearchLabelStyle}
    />

---

如果您使用的是material ui v0.xx，希望此答案对您有所帮助

您使用的是什么版本的材质ui？v0还是v1？我使用的是v0.20.0汉克斯，但这不是我想要的。inputStyle属性仅更改在文本区域中键入的文本的样式。我已经更新了原始帖子中的图片，以便更清楚地了解我想要什么。我也在用v0.20.0.hoo好的，明白了。让我试试