Hover functionality on Reactjs and Material UI

Question

I am using reactjs and material ui and i am not being able to change the background color of selected items in several components, for example in the 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'}}

But i don't know how to add a hover functionality or change the selected item color.

Any experiences on this?

Thanks!

user1348044 · Accepted Answer · 2018-11-11 17:19:15Z

1

Material-UI uses JSS for compiling style. You can see more about that in Material-UI's documentation.

CSS selectors are done as another property, so you can just use &:hover

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

answered Nov 11, 2018 at 17:19

user1348044

Sign up to request clarification or add additional context in comments.

Comments

Andrii Starusiev · Accepted Answer · 2017-08-27 07:48:18Z

0

If you want to make hover in your component, you can use css styles:

    <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

edited Aug 27, 2017 at 7:48

answered Aug 26, 2017 at 21:15

Andrii Starusiev

7,7942 gold badges31 silver badges40 bronze badges

3 Comments

Lucas Milotich Over a year ago

This does not work. If you add this: <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>a</MenuItem> <MenuItem>a</MenuItem> </SelectField> the hover only applies on the select field, not the menu items

Andrii Starusiev Over a year ago

@LucasMilotich, sure, this hover was for the select, but not menu items. I've edited the code and the sndbox link for menu items hover.

Andrii Starusiev Over a year ago

@LucasMilotich, glad to help :) Mark as right answer then.

Kalaikumar Thangasamy · Accepted Answer · 2017-08-26 20:23:35Z

0

There is selectedMenuItemStyle property you can apply style like below.

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

>

answered Aug 26, 2017 at 20:23

Kalaikumar Thangasamy

5642 silver badges8 bronze badges

1 Comment

Lucas Milotich Over a year ago

This only works with the selected option, I would like to change the background color on mouse over (for example)

Collectives™ on Stack Overflow

Hover functionality on Reactjs and Material UI

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related