ReactjとMaterial UIのホバー機能

Question

私はreactjsと材料UIを使用していますが、SelectFieldなど、いくつかのコンポーネントで選択した項目の背景色を変更できません。

<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'}} 

ただし、ホバー機能を追加する方法や選択した項目の色を変更する方法はわかりません。

これに関する経験はありますか？

ありがとうございます！

Answer 1

あなたのコンポーネントでホバリングをしたい場合は、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

Answer 2

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'}} 

>