Les pseudo-éléments CSS dans React
je suis en train de construire Réagir composants. J'ai ajouté CSS inline dans les composants comme suggéré dans cette brillante présentation par un des gars derrière React. J'ai essayé toute la nuit de trouver un moyen d'ajouter des classes pseudo CSS en ligne, comme sur la diapositive intitulée "::after" dans la présentation. Malheureusement, je n'ai pas juste besoin d'ajouter le content:"";, mais aussi position:absolute; -webkit-filter: blur(10px) saturate(2);. Les diapositives montrent comment ajouter du contenu à travers {/* … */}, mais comment voulez-vous ajouter d'autres propriétés?
3 réponses
Eu une réponse de @Vjeux plus à l' Réagir l'équipe:
Normal HTML / CSS:
<div class="something"><span>Something</span></div>
<style>
.something::after {
content: '';
position: absolute;
-webkit-filter: blur(10px) saturate(2);
}
</style>
Réagir avec style en ligne:
render: function() {
return (
<div>
<span>Something</span>
<div style={{position: 'absolute', WebkitFilter: 'blur(10px) saturate(2)'}} />
</div>
);
},
Le truc, c'est qu'au lieu d'utiliser ::after dans CSS afin de créer un nouvel élément, vous devriez plutôt créer un nouvel élément via React. Si vous ne voulez pas avoir à ajouter cet élément partout, puis faites un composant qui le fait pour vous.
Pour les attributs spéciaux comme -webkit-filter, la façon de coder ils sont en supprimant les tirets - et en majuscules la lettre suivante. De sorte qu'il se transforme en WebkitFilter. Notez que fait {'-webkit-filter': ...} devrait également fonctionner.
les styles Inline ne peuvent pas être utilisés pour cibler des pseudo-classes ou des pseudo-éléments. Vous devez utiliser une feuille de style.
si vous voulez générer des CSS de façon dynamique, alors la façon la plus simple est de créer un élément DOM <style>.
<style dangerouslySetInnerHTML={{
__html: [
'.my-special-div:after {',
' content: "Hello";',
' position: absolute',
'}'
].join('\n')
}}>
</style>
<div className='my-special-div'></div>
le style Inline ne supporte pas les pseudo ou les règles at (par ex., @media). Les recommandations vont de la ré-implémentation des fonctionnalités CSS en JavaScript pour les États CSS comme :hover par onMouseEnter et onMouseLeave d'utiliser plus d'éléments pour reproduire des pseudo-éléments comme :after et :before il suffit d'utiliser une feuille de style externe.
personnellement, je n'aime pas toutes ces solutions. La réimplantation des fonctionnalités CSS via JavaScript ne se déroule pas bien, pas plus que l'ajout de fonctions superflues. balisage.
Imaginez une grande équipe où chaque développeur recrée des fonctionnalités CSS comme :hover. Chaque développeur le faire différemment, comme les équipes de grandir en taille, si cela peut être fait, ce sera fait. Le fait est Qu'avec JavaScript il y a environ n façons de ré-implémenter les fonctionnalités CSS, et au fil du temps, vous pouvez parier sur chacune de ces façons d'être implémenté avec le résultat final étant le code spaghetti.
Alors que faire? L'utilisation de CSS. Accordée vous avez demandé sur inline style va supposer que vous êtes probablement dans le CSS-JS camp (moi aussi!). Ont trouvé la colocation HTML et CSS aussi valable que la colocation JS et HTML, beaucoup de gens ne s'en rendent pas encore compte (la colocation JS-HTML a eu beaucoup de résistance au début).
Fait une solution dans cet espace appelé Style It qui permet simplement à votre CSS d'écrire en clair dans vos composants React. Il n'est pas nécessaire de gaspiller les cycles en réinventant les CSS dans JS. Bon outil pour le bon travail, voici un exemple utilisant :after:
npm install style-it --save
Syntaxe Fonctionnelle ( 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;
syntaxe 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;
exemple de coeur tiré de CSS-Tricks