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

Material-UI使用JSS来编译样式。您可以在Material-UI的documentation中看到有关此内容的更多信息。

CSS选择器作为另一个属性完成，因此您只需使用&:hover

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

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

>

Answer 3

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

Reactjs和Material UI上的悬停功能

3 个答案: