在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上懸停功能

回答

相關問題