import React from 'react'; const style = { h2 : { fontSize: '20px'; color: 'black'; } & span: { color: 'white'; } } const Main = () => { return ( <h2 style={style}>Hello<span>Test</span></h2> ); } export default Main;
Remarque : peut être dynamique. H2 est la balise parent et j'ai appliqué le style dans la même balise et je souhaite qu'il s'applique également aux balises enfants ().
Les attributs de style JSX sont similaires aux attributs de style HTML. L'attribut style et l'attribut n'acceptent que les propriétés CSS. Par conséquent, l’utilisation de sélecteurs, de pseudo-éléments ou de pseudo-classes n’est pas autorisée.
Utiliser les attributs de style
Remplacez les éléments suivants :
avec :
ou plus clairement :
Cependant, puisque vous souhaitez définir uniquement des styles pour les éléments h2, nous avons plus d'options :
CSS/SCSS
Utilisez CSS sur des fichiers séparés :
Parmi eux,
.your-css.css
le fichier contientMême imbriqué (si vous utilisez un préprocesseur comme .scss)
CSS-in-JS
En envisageant une solution plus « React », nous pourrions utiliser CSS-in-JS comme
styled-components
En savoir plus