在Reactjs和Material UI上悬停功能

我正在使用reactjs和材质UI，我无法更改多个组件中所选项目的背景颜色，例如在SelectField中。在Reactjs和Material UI上悬停功能

<SelectField 
    floatingLabelText="Choose a sport" 
    value={this.state.value} 
    onChange={this.handleChange.bind(this)} 
    menuStyle={{color:'red'}} 
    menuItemStyle={{color:'black', borderBottom:'1px solid white'}} 
    listStyle={{backgroundColor:'rgb(0, 188, 212)'}} 
    labelStyle={{color:'black'}}

但我不知道如何添加悬停功能或更改选定的项目颜色。

有关于此的任何经验？

谢谢！

来源

2017-08-26 Lucas Milotich

如果你想悬停在你的组件，你可以使用CSS样式：

<div> 
     <style> 
      {` 
       .menuItem:hover { 
       background-color: red !important; 
       } 

       .menuItem { 
       background-color: transparent !important; 
       }  
      `} 
     </style> 
     <MuiThemeProvider> 
      <SelectField 
      id="field" 
      floatingLabelText="Choose a sport" 
      menuStyle={{ color: 'red' }} 
      menuItemStyle={{ color: 'black', borderBottom: '1px solid white' }} 
      listStyle={{ backgroundColor: 'rgb(0, 188, 212)' }} 
      labelStyle={{ color: 'black' }} > 
      <MenuItem className="menuItem" value={1} primaryText="Never" /> 
      <MenuItem className="menuItem" value={2} primaryText="Every Night" /> 
      <MenuItem className="menuItem" value={3} primaryText="Weeknights" /> 
      <MenuItem className="menuItem" value={4} primaryText="Weekends" /> 
      <MenuItem className="menuItem" value={5} primaryText="Weekly" /> 
      </SelectField> 
     </MuiThemeProvider> 
     </div>

https://codesandbox.io/s/w7q276lk08

来源

2017-08-26 21:15:31 Andrew

这不起作用。如果添加此：一个一个悬停只适用于选择字段，而不是菜单项 –

@LucasMilotich，当然，这个悬停用于选择，但不是菜单项。我编辑了代码和菜单项悬停的sndbox链接。 – Andrew

太棒了！有效。谢谢！！ –

有selectedMenuItemStyle属性你可以应用下面的样式。

<SelectField 
    floatingLabelText="Choose a sport" 
    value={this.state.value} 
    onChange={this.handleChange.bind(this)} 
    menuStyle={{color:'red'}} 
    menuItemStyle={{color:'black', borderBottom:'1px solid white'}} 
    listStyle={{backgroundColor:'rgb(0, 188, 212)'}} 
    labelStyle={{color:'black'}} 
    selectedMenuItemStyle={{color:'red'}} 

>

来源

2017-08-26 20:23:35

这仅适用于所选择的选项，我想改变背景颜色在鼠标悬停（例如） –

在Reactjs和Material UI上悬停功能

回答

相关问题