Có thể thêm màu di chuột tùy chỉnh vào Nút được nâng lên không?

Question

Làm việc trên một dự án đang sử dụng thư viện Material-UI của các thành phần và tôi đã nhận được yêu cầu cho màu di chuột nút tùy chỉnh nằm ngoài quy ước bình thường của chủ đề MUI.

Tôi đã tìm thấy khối mã có liên quan này trong nguồn Nút được nâng lên, https://github.com/callemall/material-ui/blob/master/src/RaisedButton/RaisedButton.js#L98. Đặt nhãn tùy chỉnhColor thay đổi trạng thái di chuột, nhưng điều đó vẫn không đáp ứng nhu cầu hiện tại của tôi để có màu sắc của nút di chuột khác với màu của nhãn.

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

Có cách nào để ghi đè màu nền lớp phủ theo cách khác để tôi có thể sử dụng màu tùy chỉnh riêng biệt không?

Để làm rõ, tôi đang tìm cách thực hiện việc này bằng cách tạo kiểu nội tuyến hoặc thông qua ghi đè trên nút. Việc thêm một lớp và sử dụng CSS bên ngoài không phải là một tùy chọn.

Answer 1

Tôi đã có thể giải quyết nó bằng cách đặt một thành phần className prop tới RaisedButton và chỉ định thuộc tính :hover trong css với chỉ thị !important.

Trong thành phần của bạn:

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

Trong css của bạn:

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

Answer 2

Bạn có thể sử dụng jquery để chỉ cần loại bỏ lớp và addClass

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

'#test đại diện cho id và .test đại diện cho lớp của phần tử bạn đang cố gắng thao tác.

Answer 3

tôi đã sử dụng window.eventlistener cho các sự kiện nhấp chuột để ghi đè lên lớp của tôi

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

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

Answer 4

Đối với nút tăng sử dụng prop hoverColor này vì vậy nó sẽ là một cái gì đó giống như

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

Answer 5

Trong render chức năng của RaisedButton , đối tượng kiểu overlay được ghi đè với giá trị overlayStyle. (Đoạn trích có liên quan dưới đây).

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

Điều này có nghĩa bạn có thể đặt màu nền bằng cách thiết lập backgroundColor của overlayStyle prop. Tôi nghĩ rằng phần thứ hai của câu đố là đặt các sự kiện onMouseLeave và onMouseEnter và tự quản lý màu nền hiện tại bằng cách thay đổi màu sắc bất cứ khi nào chuột vào hoặc rời khỏi vùng nút.

Thật không may, có vẻ như các sự kiện tiêu điểm bàn phím không có móc được hiển thị trong API MaterialUI, vì vậy bạn sẽ không thể xử lý trường hợp đó mà không sửa đổi thư viện.

Đây có thể là điều đáng để gửi yêu cầu kéo đến MaterialUI nếu bạn đi tuyến sửa đổi thư viện.

Answer 6

giải pháp Khá dễ dàng:

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

Bạn áp dụng màu sắc để nút của bạn mà thay đổi nhãn và màu overlay, và sau đó bạn đặt nhãn của bạn trong một khoảng mà bạn chỉ định màu nào bạn muốn văn bản được. Bằng cách đó nền, nhãn và lớp phủ của bạn có thể màu sắc khác nhau :)

cũng có thể được viết bằng các thuộc tính style của các thẻ tương ứng:

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