Материал-UI RaisedButton на стилях наведения

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) Вы должны использовать CSS :hover на <button> элементе, который RaisedButton делает

2) Вы должны инициализировать реквизит RaisedButton «s с цветами перевернутых уже (это потому, что material-ui использует цвет ярлыка, чтобы определить наложение и цвет пульсации). Используйте свой CSS для «исправления» измененных цветов, если не: hover'ing.

3) Вы должны соответствовать переходу, материал-интерфейс использует на этикетке кнопки, либо он не будет анимировать правильно

ПРИМЕЧАНИЯ: Если вы используете материал-Ui в пользовательских тематизацию, вы можете изменить этот компонент используйте основной/вторичный цвет темы raiseButton, вместо того, чтобы принимать пользовательские цвета.

Answer 2

Просто попробуйте это, вы можете создать className в reactjs, так что вы можете сделать стиль парения ..

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

Извините за поздний ответ, но, возможно, это поможет кому-то еще. Материал-интерфейс поддерживает медиа-запросы, как это (по крайней мере, с 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.