Mantén la atención ya que en esta división hallarás el hallazgo que buscas.
Solución:
Recibí una respuesta de @Vjeux en el equipo de React:
HTML / CSS normal:
Something
Reaccionar con estilo en línea:
render: function()
return (
Something
);
,
El truco es que en lugar de usar ::after en CSS para crear un nuevo elemento, debe crear un nuevo elemento a través de React. Si no desea tener que agregar este elemento en todas partes, cree un componente que lo haga por usted.
Para especial attributes me gusta -webkit-filter, la forma de codificarlos es quitando guiones y poniendo en mayúscula la siguiente letra. Entonces se convierte en WebkitFilter. Tenga en cuenta que haciendo '-webkit-filter': ... también debería funcionar.
Los estilos en línea no se pueden usar para apuntar a pseudoclases o pseudoelementos. Necesita utilizar una hoja de estilo.
Si desea generar CSS de forma dinámica, la forma más sencilla es crear un elemento DOM
El estilo en línea no admite pseudos ni reglas at (p. Ej., @Media). Las recomendaciones van desde la reimplementación de funciones de CSS en JavaScript para estados de CSS como :hover vía onMouseEnter y onMouseLeave a usar más elementos para reproducir pseudo-elementos como :after y :before para usar una hoja de estilo externa.
Personalmente no me gustan todas esas soluciones. Reimplementar las características de CSS a través de JavaScript no se escala bien, ni tampoco agregar marcas superfluas.
Imagine un gran equipo en el que cada desarrollador está recreando características CSS como :hover. Cada desarrollador será Hágalo de manera diferente, a medida que los equipos crezcan en tamaño, si se puede hacer, se hará. El hecho es que con JavaScript hay sobre norte formas de reimplementar las funciones de CSS y, con el tiempo, puede apostar a que se implementen todas y cada una de esas formas con el resultado final de código espagueti.
¿Entonces lo que hay que hacer? Usa CSS. De acuerdo, preguntaste sobre el estilo en línea, asumiendo que probablemente estés en el campo CSS-in-JS (¡yo también!). He encontrado que colocar HTML y CSS es tan valioso como colocar JS y HTML, mucha gente simplemente no se da cuenta todavía (la colocación de JS-HTML también tuvo mucha resistencia al principio).
Hice una solución en este espacio llamada Style It que simplemente le permite escribir CSS de texto sin formato en sus componentes de React. No es necesario desperdiciar ciclos reinventando CSS en JS. Herramienta adecuada para el trabajo adecuado, aquí hay un ejemplo que utiliza :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%;
`,
);
export default Intro;
Sintaxis JSX (JSFIDDLE)
import React from 'react';
import Style from 'style-it';
class Intro extends React.Component
render()
return (
export default Intro;
Ejemplo de corazón extraído de CSS-Tricks