javascript - after - Pseudo elementos CSS en React

react native pseudo elements

Question

Estoy construyendo componentes React . He agregado CSS en línea en los componentes como se sugiere en esta brillante presentación por uno de los tipos detrás de React. He estado intentando toda la noche encontrar una forma de agregar CSS pseudo clases en línea, como en la diapositiva titulada ":: after" en la presentación. Desafortunadamente, no solo necesito agregar el content:""; propiedad, pero también position:absolute; -webkit-filter: blur(10px) saturate(2); position:absolute; -webkit-filter: blur(10px) saturate(2); . Las diapositivas muestran cómo agregar contenido a través de {/* … */} , pero ¿cómo agregaría otras propiedades?

Answer 1

El estilo en línea no admite pseudos ni reglas (ej., @media). Las recomendaciones van desde la reimplementación de funciones de CSS en JavaScript para estados de CSS como :hover pasando por onMouseEnter y onMouseLeave de usar más elementos para reproducir pseudoelementos como :after y :before para simplemente usar una hoja de estilos externa.

Personalmente no me gustan todas esas soluciones. La reimplementación de las características CSS a través de JavaScript no se escala bien, ni tampoco agrega marcas superfluas.

Imagine un gran equipo en el que cada desarrollador recrea características CSS como :hover . Cada desarrollador lo hará de manera diferente, a medida que los equipos crecen en tamaño, si se puede hacer, se hará. El hecho es que con JavaScript hay n maneras de volver a implementar las funciones de CSS, y con el tiempo puede apostar por cada una de esas formas que se implementan, con el resultado final de que es el código de spaghetti.

¿Entonces lo que hay que hacer? Use CSS Concedido que preguntaste sobre el estilo en línea asumiendo que probablemente estés en el campamento de CSS en JS (¡yo también!). He encontrado que ubicar HTML y CSS es tan valioso como colocar JS y HTML, mucha gente simplemente aún no se da cuenta (la colocación JS-HTML también tuvo mucha resistencia al principio).

Hice una solución en este espacio llamado Style It que simplemente permite escribir CSS de texto claro en los componentes de React. No es necesario perder ciclos reinventando CSS en JS. Herramienta correcta para el trabajo correcto, aquí hay un ejemplo que usa :after :

npm install style-it --save

Sintaxis funcional ( JSFIDDLE )

import React from ''react'';
import Style from ''style-it'';
class Intro extends React.Component {
render() {
return Style.it(`
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
`,
<div id="heart" />
);
}
}
export default Intro;

Sintaxis JSX ( JSFIDDLE )

import React from ''react'';
import Style from ''style-it'';
class Intro extends React.Component {
render() {
return (
<Style>
{`
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
`}
<div id="heart" />
</Style>
}
}
export default Intro;

Ejemplo de corazón extraído de CSS-Tricks

Answer 2

Los estilos en línea no se pueden usar para apuntar a pseudo-clases o pseudo-elementos. Necesitas usar una hoja de estilo.

Si desea generar CSS dinámicamente, la forma más fácil es crear un elemento DOM <style> .

<style dangerouslySetInnerHTML={{
__html: [
''.my-special-div:after {'',
'' content: "Hello";'',
'' position: absolute'',
''}''
].join(''/n'')
}}>
</style>
<div className=''my-special-div''></div>

Answer 3

Obtuve una respuesta de @Vjeux en el equipo de React :

HTML / CSS normal:

<div class="something"><span>Something</span></div>
<style>
.something::after {
content: '''';
position: absolute;
-webkit-filter: blur(10px) saturate(2);
}
</style>

Reacciona con el estilo en línea:

render: function() {
return (
<div>
<span>Something</span>
<div style={{position: ''absolute'', WebkitFilter: ''blur(10px) saturate(2)''}} />
</div>
);
},

El truco es que en lugar de usar ::after en CSS para crear un nuevo elemento, en su lugar deberías crear un nuevo elemento mediante React. Si no desea tener que agregar este elemento en todas partes, cree un componente que lo haga por usted.

Para atributos especiales como -webkit-filter , la forma de codificarlos es eliminar guiones y poner en mayúscula la siguiente letra. Entonces se convierte en WebkitFilter . Tenga en cuenta que hacer {''-webkit-filter'': ...} también debería funcionar.