Tedarikçi öneklerini, tepkilerdeki satır içi stillere nasıl uygularım?

Question

React içindeki CSS özellikleri, satıcı önekleriyle birlikte otomatik olarak eklenmez. Örneğin ile

:

Safari'de

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

dönme uygulanabilir değildir.

Bunu nasıl başardım?

Answer 1

Tepki, satıcı öneklerini otomatik olarak uygulamaz. Satıcı eklerler aşağıdaki deseni gereği satıcı öneki isim ve ayrı pervane olarak eklemek için

:

-vendor-specific-prop: 'value' 

haline gelir: Yani

VendorSpecificProp: 'value' 

, örnekteki Bu soruya şu şekilde cevap verilmesi gerekiyor:

Değer önekleri bu şekilde yapılamaz. Örneğin bu CSS: nesneler yinelenen anahtarlar olamaz çünkü

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

, bu tek tarayıcı destekleyen bunlardan hangisinin bilerek yapılabilir.

Şekillendirici takım zinciri için bir alternatif Radium kullanmak olacaktır. Özelliklerinden biri otomatik satıcı öneklemesidir. radyum içinde

Bizim arka plan örneği şuna benzer: Ben react.js ile deneyime sahip, ancak bu Lea Verou gelen kütüphane js bakma

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

     // fallback 
     'black', 
    ] 
    } 
}; 

Answer 2

. DOM'da doğrudan stili önekler.

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

Answer 3

Böyle bir şey kullanabilirsiniz:

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

otomatik satıcıya-öneki için stil nesnelerini.

Answer 4

Ben aslında aynı problemle karşı karşıya kaldım, ve önleme kütüphanelerinin hiçbiri istediğim işi yapmadı.

react-prefixer

Hala (bu sabah inşa edilmiş) çok genç, ama onu koruyacağız: yüzden tane kendim oluşturdum. Umarım yardımcı olur. Radium için beni tanıtmak için