マテリアルUI RaisedButton on hoverスタイル

Question

ホバー上のMaterial-UI RaisedButtonのスタイリングを変更したいのですが、ホバー上で何が起きるかは次のように定義されているため、特定のオプションはないようです。材料設計ガイドライン。

しかし、ボタンのスタイリング（主に色と背景色）を変更する方法はありますか？

m-uiはボタンのレイヤーをたくさん使用していますが、現在、ボタンの上に白い透明の背景が追加されているため、すべてのテーマカラーでうまく機能します。

（より正確には、私は色と背景色の間の色を反転したいと思います。）

Answer 1

CSSといくつかのハッカーを使用する必要がありますが、以下はそれを包み込む小さなコンポーネントです。

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上でここにあなたのためにそれをカプセル化しようとしています。あなたが異なっこれを実装することを選択した場合、重要なポイントは以下のとおりです。

1）あなたが反転色でRaisedButtonの小道具を初期化する必要があります）RaisedButtonが

2をレンダリング<button>要素にCSS :hoverを使用する必要があります（これは、材料-uiがラベルの色を使用してホバーのオーバーレイとリップルの色を決定するためです）。あなたのCSSを使用して、スワップされていない色を「修正する」：ホバーします。

3）あなたは材料-UIは、ボタンのラベルに使用するトランジションを一致させる必要がある、またはそれが正しく

NOTEをアニメーション化しません：あなたは材料-UIのカスタムテーマを使用している場合は、このコンポーネントを修正することができますカスタムカラーを受け入れるのではなく、raisedButtonテーマのプライマリ/セカンダリカラーを使用してください。

Answer 2

ちょうどあなたがホバースタイルを行うことができますので、あなたは、reactjsでclassNameを作成することができ、これを試してみてください。..

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; 

Answer 3

申し訳ありませんが、遅い回答ですが、これは他の人に役立つかもしれません。材料-UIは（少なくとも1.0で）このようなメディアクエリをサポートしています。

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

この例とそれ以上はMark Dalgleish's post about unified styling languageから見つけることができます。