css3 - style - ¿Cómo aplico prefijos de proveedor a los estilos en línea en reactjs?
etiquetas css (4)
Reaccionar no aplica los prefijos del vendedor automáticamente.
Para agregar prefijos de proveedor, nombre el prefijo de proveedor según el siguiente patrón y agréguelo como un accesorio separado:
-vendor-specific-prop: ''value''
se convierte en:
VendorSpecificProp: ''value''
Entonces, en el ejemplo de la pregunta, necesita convertirse en:
<div style={{
transform: ''rotate(90deg)'',
WebkitTransform: ''rotate(90deg)''
}}>Hello World</div>
Los prefijos de valor no se pueden hacer de esta manera. Por ejemplo este CSS:
background: black;
background: -webkit-linear-gradient(90deg, black, #111);
background: linear-gradient(90deg, black, #111);
Debido a que los objetos no pueden tener claves duplicadas, esto solo se puede hacer sabiendo a cuál de estos el navegador es compatible.
Una alternativa sería usar Radium para la cadena de herramientas de diseño. Una de sus características es el prefijo automático del vendedor.
Nuestro ejemplo de fondo en radio se ve así:
var styles = {
thing: {
background: [
''linear-gradient(90deg, black, #111)'',
// fallback
''black'',
]
}
};
Las propiedades de CSS en React no se agregan automáticamente con sus prefijos de proveedor.
Por ejemplo, con:
<div style={{
transform: ''rotate(90deg)''
}}>Hello World</div>
En Safari, la rotación no se aplicaría.
¿Cómo logro eso?
No tengo experiencia con react.js, pero mira esta biblioteca js de Lea Verou. Prefija estilo directo en DOM.
Puedes usar algo como esto:
https://github.com/cgarvis/react-vendor-prefix
para vender automáticamente el prefijo del proveedor de sus objetos de estilo.
De hecho, me enfrenté al mismo problema, y ninguna de las bibliotecas de prefijos reactivas hizo el trabajo que yo quería. Así que construí uno yo mismo:
Todavía es bastante joven (lo construí esta mañana), pero lo mantendré. Espero que ayude