Можно ли добавить настраиваемый цвет навешенных кнопок?

Работа над проектом, использующим библиотеку компонентов Material-UI компонентов, и я получил запрос на пользовательский цвет наведения курсора, который находится за пределами обычного соглашения темы MUI.

Я нашел этот соответствующий блок кода в источнике Raised Button, https://github.com/callemall/material-ui/blob/master/src/RaisedButton/RaisedButton.js#L98. Настройка пользовательского labelColor изменяет состояние зависания, но это все еще не удовлетворяет моей текущей потребности в том, чтобы цвет наведения кнопки отличался от цвета ярлыка.

overlay: {
  height: buttonHeight,
  borderRadius: borderRadius,
  backgroundColor: (state.keyboardFocused || state.hovered) && !disabled &&
    fade(labelColor, amount),
  transition: transitions.easeOut(),
  top: 0,
},

Есть ли способ переопределить цвет фона наложения другим способом, чтобы я мог использовать отдельный пользовательский цвет?

Чтобы уточнить, я ищу, чтобы сделать это, используя встроенный стиль или переопределив опору на кнопке. Добавление класса и использование внешнего CSS не является вариантом.

Ответ 1

Я смог решить его, предоставив компонент className prop to RaisedButton и указав атрибут :hover в css с директивой !important.

В вашем компоненте:

...
<RaisedButton className="my-button" />
...

В вашем css:

.my-button :hover {
  background-color: blue !important;
}

Ответ 2

Я использовал window.eventlistener для событий click для переопределения моих накладок

window.addEventListener("load",addClickHandlers,false);
function addClickHandlers(event) {
var someElement = document.getElementById("an_id");
someElement.addEventListener("click",myClickHandler,false);
}

function myClickHandler(event) {
... do stuff ...
}

Ответ 3

Для поднятой кнопки используйте эту подсказку hoverColor, так что это будет что-то вроде

<RaisedButton 
   label="Default" 
   hoverColor={"#00ff00"} 
/>

Ответ 4

В функции рендеринга RaisedButton объект стиля overlay переопределяется с помощью overlayStyle prop. (Соответствующая выдержка приведена ниже).

<div
  ref="overlay"
  style={prepareStyles(Object.assign(styles.overlay, overlayStyle))}
>
  {enhancedButtonChildren}
</div>

Это означает, что вы можете установить цвет фона, установив backgroundColor подставки overlayStyle. Я думаю, что вторая часть головоломки состоит в том, чтобы установить события onMouseLeave и onMouseEnter и управлять текущим цветом фона самостоятельно, изменяя цвет всякий раз, когда мышь входит или покидает область кнопки.

К сожалению, похоже, что в событиях с фокусом клавиатуры нет обложек в API MaterialUI, поэтому вы не сможете обрабатывать этот случай без изменения библиотеки.

Это может быть что-то стоящее, чтобы отправить запрос на перенос в MaterialUI, если вы пройдете маршрут модификации библиотеки.

Ответ 5

Довольно простое решение:

.yourButtonClass{
  color: aColor !important;
  &>span{
    color: anotherColor;
  }
}

Вы применяете цвет к своей кнопке, который меняет ярлык и цвет наложения, а затем вы помещаете свою метку в диапазон, для которого вы указываете, какой цвет вы хотите, чтобы текст был. Таким образом, ваш фон, ярлык и наложение могут быть разных цветов:)

также может быть записана в атрибуте style соответствующих тегов:

<md-button class="md-raised" style="color: aColor !important">
    <span style="color: anotherColor">yourLabel</span>
</md-button>

Ответ 6

Вы можете использовать jquery для простого удаления класса и addClass

jQuery(document).ready(function($){
  $('#test').hover(
     function(){ $(this).addClass('redclass') },
     function(){ $(this).removeClass('overlay') }
   )
 });

'# test представляют id и .test представляют класс элемента, который вы пытаетесь манипулировать.