悬停样式上的Material-UI [v0.x] RaisedButton [英] Material-UI [v0.x] RaisedButton on hover styles

问题描述

我想在悬停时更改Material-UI RaisedButton的样式，但似乎没有特定的选择，因为悬停时发生的事情由材料设计准则定义.

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?

我看到m-ui的按钮使用了许多不同的层，并且目前在按钮上方添加了一个白色透明背景，以便在所有主题颜色下都能很好地发挥作用.

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.)

推荐答案

您将不得不使用CSS和一些黑客工具，但是下面是一个将其包装的小组件.

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>  
  );
};

示例:

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

您可以选择在此处以不同的方式来处理CSS，但我只是想在此处将其封装在SO上，以使其更易于测试.如果您选择以不同的方式实现此目标，则关键点是:

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)您需要在RaisedButton呈现的<button>元素上使用CSS :hover

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

2)您必须使用已经反转的颜色来初始化RaisedButton的道具(这是因为material-ui使用标签颜色来确定悬停覆盖和波纹颜色).不进行悬停时，使用CSS来固定"交换的颜色.

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)您需要匹配material-ui在按钮标签上使用的过渡，否则将无法正确设置动画

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

注意:如果您正在使用material-ui的自定义主题，则可以修改此组件以使用凸起按钮主题的原色/次要颜色，而不是接受自定义颜色.

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.

这篇关于悬停样式上的Material-UI [v0.x] RaisedButton的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！