Làm cách nào để áp dụng tiền tố của nhà cung cấp cho kiểu nội tuyến trong reactjs?

Question

Thuộc tính CSS trong React không được tự động thêm vào với tiền tố nhà cung cấp của chúng.

Ví dụ, với:

<div style={{ 
    transform: 'rotate(90deg)' 
}}>Hello World</div> 

Trong Safari, luân chuyển sẽ không được áp dụng.

Làm cách nào để hoàn thành công việc đó?

Answer 1

Phản ứng không tự động áp dụng tiền tố của nhà cung cấp.

Để thêm tiền tố nhà cung cấp, tên tiền tố nhà cung cấp theo mẫu sau, và thêm nó như là một prop riêng biệt:

-vendor-specific-prop: 'value' 

trở thành:

VendorSpecificProp: 'value' 

Vì vậy, trong ví dụ trong câu hỏi, cần phải trở thành:

<div style={{ 
    transform: 'rotate(90deg)', 
    WebkitTransform: 'rotate(90deg)' 
}}>Hello World</div> 

Không thể thực hiện tiền tố giá trị theo cách này. Ví dụ: CSS này:

background: black; 
background: -webkit-linear-gradient(90deg, black, #111); 
background: linear-gradient(90deg, black, #111); 

Vì đối tượng không thể có khóa trùng lặp, điều này chỉ có thể thực hiện được khi biết trình duyệt nào hỗ trợ.

Cách khác là sử dụng Radium cho công cụ tạo kiểu tóc. Một trong những tính năng của nó là tiền tố của nhà cung cấp tự động.

dụ nền của chúng tôi trong radium trông như thế này:

var styles = { 
    thing: { 
    background: [ 
     'linear-gradient(90deg, black, #111)', 

     // fallback 
     'black', 
    ] 
    } 
}; 

Answer 2

Tôi không có kinh nghiệm với react.js, nhưng xem xét điều này js thư viện từ Lea Verou. Nó tiền tố kiểu trực tiếp trong DOM.

http://leaverou.github.io/prefixfree/

Answer 3

Bạn có thể sử dụng một cái gì đó như thế này:

https://github.com/cgarvis/react-vendor-prefix

để tự động Vendor-prefix đối tượng phong cách của bạn.

Answer 4

Tôi thực sự phải đối mặt với cùng một vấn đề và không có thư viện tiền tố phản ứng nào ở đó thực hiện công việc tôi muốn. Vì vậy, tôi đã xây dựng một bản thân mình:

react-prefixer

Nó vẫn còn khá trẻ (xây dựng nó sáng nay), nhưng tôi sẽ được duy trì nó. Hy vọng nó giúp ích.