Material-UI [v0.x] RaisedButton on hover styles

Question

I'd like to change the styling of a Material-UI RaisedButton on hover, but it seems like there is no specific option to do that, as what happens on hover is sort of defined by material design guidelines.

Nevertheless, is there any way to change a button's styling (mainly color and background-color) when hovering over them?

I see m-ui is using a lot of different layers for their buttons, and currently adds a white transparent background on top of the button so that it performs well with all theme colours.

(To be more precise, I'd like to invert the colours between the colour and background-color.)

Answer 1

You'll have to use CSS and some hackery, but below is a little component that wraps it up.

https://jsfiddle.net/0gjs8bh3/3/

const InvertHoverButton = ({ id, backgroundColor, labelColor }) => {
  // cubic-bezier(0.23, 1, 0.32, 1)
  const transition = `background-color 450ms ${MaterialUI.transitions.easeOutFunction} 0ms`;

    return (
    <div style={{ display: 'inline-block' }}>
        <style>
          {`
          #${id}:hover {
            transition: ${transition} !important;
            background-color: ${labelColor} !important;
            color: ${backgroundColor} !important;
          }

          #${id} {
            transition: ${transition} !important;
            background-color: ${backgroundColor} !important;
            color: ${labelColor} !important;
          }      
          `}
        </style>
        <RaisedButton id={id} backgroundColor={labelColor} labelColor={backgroundColor} className="test">Fiddle!</RaisedButton>
      </div>  
  );
};

Example:

// Must set id, backgroundColor and labelColor
<InvertHoverButton id="myButton" backgroundColor="red" labelColor="white">Fiddle!</InvertHoverButton>

You could choose to do the CSS differently here, but I am just trying to encapsulate it for you here on SO to make it more easily testable. If you choose to implement this differently, the key points are:

1) You need to use CSS :hover on the <button> element that RaisedButton renders

2) You must initialize the RaisedButton's props with the colors inverted already (this is because material-ui uses the label color to determine hover overlay and ripple color). Use your CSS to 'fix' the swapped colors when not :hover'ing.

3) You need match the transition that material-ui uses on the button's label, or it won't animate correctly

NOTE: If you are using material-ui's custom theming, you could modify this component to use the raisedButton theme's primary/secondary colors rather than accepting custom colors.

Answer 2

Sorry for a late answer, but maybe this will help someone else. Material-ui supports media queries like this (at least with 1.0):

const styles = {
  button: {
    padding: '10px',
    '&:hover': {
      background: 'blue'
    }
  },
  '@media (min-width: 1024px)': {
    button: {
      padding: '20px'
    }
  }
}

This example and more can be found from Mark Dalgleish's post about unified styling language.

Answer 3

 linkLabel:{
    fontSize: 14,
    color: '#2bd5c6',
    '&:hover': {
      color: '#2bd5c6 !important',
    }
  }

sometimes 'hover' styles not applying even though you applied. U can achieve using '!important'.

<a href="#" className={classes.linkLabel}> {'Link content'}</a>

Answer 4

Just try this, you can create className in reactjs, so you can do hover style..

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return (
      <Style>
      {`
        .intro:hover {
          color: red;
        }
      `}
      <button className="intro">Save</button>
    </Style>
  }
}

export default Intro;