Định nghĩa lớp CSS không hoạt động bên trong các phần tử <g:HTML>

Question

Các bạn có thể cho tôi biết tại sao định nghĩa lớp css không hoạt động trong ví dụ sau?

Tôi đang sử dụng GWT 2.4 + Chrome 17.

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' 
      xmlns:g='urn:import:com.google.gwt.user.client.ui'> 
    <ui:style> 
     div.test { 
      color: red; 
     } 
    </ui:style> 
    <g:HTML> 
     <div class="test">I should be red but I'm not</div> 
    </g:HTML> 
</ui:UiBinder> 

Answer 1

lớp CSS được liệt kê trong <ui:style> sẽ được obfuscated, đi test-GKYSKJX (hoặc một cái gì đó tương tự).

Cập nhật div của bạn như thế này:

<div class="{style.test}">Now I'm red :)</div> 

Ngoài ra, bạn có thể chọn để buộc phong cách của bạn để không xáo trộn bằng cách làm này:

@external .test; 
div.test { 
    color: red; 
} 

Trừ khi bạn có một lý do chính đáng, tôi khuyên bạn nên gắn bó với phương pháp đầu tiên.

Xem thêm tại Declarative Layout with UiBinder - Hello Stylish World.