Работа над проектом, использующим библиотеку компонентов 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 не является вариантом.
Я смог решить его, предоставив компонент className prop to RaisedButton и указав атрибут :hover в css с директивой !important.
В вашем компоненте:
...
<RaisedButton className="my-button" />
...
В вашем css:
.my-button :hover {
background-color: blue !important;
}
Я использовал 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 ...
}
Для поднятой кнопки используйте эту подсказку hoverColor, так что это будет что-то вроде
<RaisedButton
label="Default"
hoverColor={"#00ff00"}
/>
В функции рендеринга RaisedButton объект стиля overlay переопределяется с помощью overlayStyle prop. (Соответствующая выдержка приведена ниже).
<div
ref="overlay"
style={prepareStyles(Object.assign(styles.overlay, overlayStyle))}
>
{enhancedButtonChildren}
</div>
Это означает, что вы можете установить цвет фона, установив backgroundColor подставки overlayStyle. Я думаю, что вторая часть головоломки состоит в том, чтобы установить события onMouseLeave и onMouseEnter и управлять текущим цветом фона самостоятельно, изменяя цвет всякий раз, когда мышь входит или покидает область кнопки.
К сожалению, похоже, что в событиях с фокусом клавиатуры нет обложек в API MaterialUI, поэтому вы не сможете обрабатывать этот случай без изменения библиотеки.
Это может быть что-то стоящее, чтобы отправить запрос на перенос в MaterialUI, если вы пройдете маршрут модификации библиотеки.
Довольно простое решение:
.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>
Вы можете использовать jquery для простого удаления класса и addClass
jQuery(document).ready(function($){
$('#test').hover(
function(){ $(this).addClass('redclass') },
function(){ $(this).removeClass('overlay') }
)
});
'# test представляют id и .test представляют класс элемента, который вы пытаетесь манипулировать.