Làm cách nào để thay đổi màu nền của thanh công cụ giấy màu (1.0)?

Question

Hôm qua tôi quyết định thử Polymer 1.0 và tôi đã phải đối mặt với những khó khăn khi cố gắng styling giấy thanh công cụ.

Các tài liệu nói rằng màu nền có thể được thay đổi bằng cách sử dụng: --paper-toolbar-nền

Nhưng làm thế nào tôi có thể sử dụng nó trên CSS?

tôi thử như sau:

paper-toolbar { 
     --paper-toolbar-background: #e5e5e5; 
    } 

Ngoài này:

paper-toolbar { 
     --paper-toolbar { 
      background: #e5e5e5; 
     } 
    } 

Nhưng không phải làm việc. Cách chính xác để làm điều đó là gì?

Cảm ơn.

Answer 1

Nếu bạn đang phong cách nó trên trang chính của bạn, sau đó bạn phải áp dụng phong cách sử dụng <style is='custom-style'>. Điều này là làm cho Thuộc tính CSS tùy chỉnh hoạt động.

Áp dụng là tương đối dễ dàng. paper-toolbar cung cấp 2 thuộc tính tùy chỉnh và một kết hợp. --paper-toolbar-background là một tài sản thay đổi màu nền của thanh công cụ trong khi --paper-toolbar-color đổi màu foreground của nó. --paper-toolbar là một mixin được áp dụng cho thanh công cụ.

Để sử dụng các đặc tính này chỉ là tương tự như áp dụng phong cách trong các yếu tố của bạn. Ví dụ:

<style is="custom-style"> 
    paper-toolbar { 
    --paper-toolbar-background: #00f; /* changes the background to blue*/ 
    --paper-toolbar-color: #0f0; /* changes the foreground color to green */ 
    --paper-toolbar: { 
     font-size: 40px; /* Change default font size */ 
    }; /* Notice the semicolon here */ 
    } 
</style> 

Answer 2

Tôi không thể tìm thấy giải pháp cho vấn đề này cho đến gần đây. Tôi có hai thanh công cụ và tôi không muốn thay đổi CSS cho tất cả các thanh công cụ chỉ là thanh công cụ tiêu đề.

Để thay đổi CSS cho mỗi thanh công cụ, trong file css bên ngoài của bạn thêm dòng sau:

paper-toolbar.paper-toolbar-0 { 
    background: orange; 
    color: red; 
} 

Tuy nhiên, điều đó không giải quyết vấn đề. Để thay đổi một thanh công cụ giấy duy nhất dựa trên một lớp học như sau:

<paper-toolbar class="header"> 
    ... 
</paper-toolbar> 

Trên đây sử dụng lớp gọi là "tiêu đề" như vậy trong CSS của tôi, tôi nói thêm:

paper-toolbar.header { 
    background: orange; 
    color: red; 
} 

... và nó làm việc ! Yay! Điều đó có nghĩa với điều này bạn sẽ có thể ghi đè bất kỳ CSS của bất kỳ của các yếu tố khác làm điều tương tự. Điều này là hoàn toàn chưa được kiểm tra nhưng tôi nghĩ rằng nó sẽ hoạt động như:

<elementName>.<classname> { 
    ... 
} 

Hy vọng tất cả điều này sẽ hữu ích!