Elementi pseudo CSS in React

Question

Sto costruendo componenti React. Ho aggiunto CSS in linea nei componenti come suggerito in this brilliant presentation da uno dei ragazzi dietro a React. Ho cercato tutta la notte di trovare un modo per aggiungere le pseudo classi CSS in linea, come nella diapositiva intitolata ":: after" nella presentazione. Sfortunatamente, non ho solo bisogno di aggiungere la proprietà content:"";, ma anche position:absolute; -webkit-filter: blur(10px) saturate(2);. Le diapositive mostrano come aggiungere contenuti tramite {/* … */}, ma come aggiungerei altre proprietà?

Answer 1

ricevuto una risposta da @Vjeux sopra al React squadra:

Normale HTML/CSS:

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

reagire con stile in linea:

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

Il trucco è che invece di usare ::after in CSS per creare un nuovo elemento, dovresti invece creare mangiato un nuovo elemento tramite React. Se non vuoi dover aggiungere questo elemento ovunque, quindi crea un componente che lo faccia per te.

Per attributi speciali come -webkit-filter, il modo per codificarli consiste rimuovendo i trattini e capitalizzando la lettera successiva. Quindi diventa WebkitFilter. Notare che anche il funzionamento di {'-webkit-filter': ...} dovrebbe funzionare.

Answer 2

Gli stili in linea non possono essere utilizzati come target per pseudo-classi o pseudo-elementi. Devi usare un foglio di stile.

Se si desidera generare CSS in modo dinamico, il modo più semplice è creare 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

Lo stile in linea non supporta pseudos o regole (ad es. @media). I suggerimenti vanno dal reimplementare le funzionalità CSS in JavaScript per gli stati CSS come :hover tramite onMouseEnter e onMouseLeave per utilizzare più elementi per riprodurre pseudo-elementi come e :before per utilizzare solo un foglio di stile esterno.

Personalmente non mi piacciono tutte queste soluzioni. Reimplementare le funzioni CSS tramite JavaScript non si adatta bene, né aggiunge marcature superflue.

Immagina una grande squadra in cui ogni sviluppatore sta ricreando funzioni CSS come :hover. Ogni sviluppatore lo farà in modo diverso, man mano che i team crescono di dimensioni, se possibile, sarà fatto. Il fatto è che con JavaScript ci sono circa n modi per reimplementare le funzionalità CSS e, nel tempo, puoi scommettere su ognuno di questi modi in cui il risultato finale è il codice spaghetti.

Quindi cosa fare? Usa CSS. Ammesso che tu abbia chiesto informazioni sullo stile in linea assumendo che tu sia probabile che tu sia nel campo CSS-in-JS (anche io!). Ho trovato che colocalizzare HTML e CSS è prezioso quanto colocare JS e HTML, molte persone semplicemente non se ne rendono conto ancora (la colocation JS-HTML aveva anche molta resistenza in un primo momento).

Realizzato una soluzione in questo spazio chiamato Style It che consente semplicemente di scrivere CSS in testo normale nei componenti React. Non è necessario sprecare cicli per reinventare CSS in JS.strumento giusto per il lavoro giusto, ecco un esempio utilizzando :after:

npm install style-it --save

funzionale Sintassi (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; 

JSX Sintassi (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; 

Esempio di cuore estratto da CSS-Tricks