Reactjs 和 Material UI 上的悬停功能答案

【问题标题】：Hover functionality on Reactjs and Material UIReactjs 和 Material UI 上的悬停功能
【发布时间】：2017-08-26 19:35:35
【问题描述】：

我正在使用 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'}}

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

有这方面的经验吗？

谢谢！

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

Material-UI 使用JSS 编译样式。您可以在 Material-UI 的 documentation 中了解更多信息。

CSS 选择器是作为另一个属性完成的，所以你可以使用&:hover

button: {
  fontSize: 12,
  '&:hover': {
    background: 'blue'
  }
},

【讨论】：

【解决方案2】：

如果要在组件中进行悬停，可以使用 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

【讨论】：

这不起作用。如果添加： aa悬停仅适用于选择字段，不适用于菜单项
@LucasMilotich，当然，这个悬停是为了选择，而不是菜单项。我已经编辑了代码和菜单项悬停的 sndbox 链接。
@LucasMilotich，很高兴为您提供帮助 :) 标记为正确答案。

【解决方案3】：

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

>

【讨论】：

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