Comment ajouter le CSS de la balise enfant basée sur la balise parent dans React ?

Question

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 ().

Answer 1

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 :

const style = {
    h2 : {
        fontSize: '20px';
        color: 'black';
    } & span: {
       color: 'white';
    }
}

const Main = () => {
    return (
        <h2 style={style}>Hello<span>Test</span></h2> 
   );
}

avec :

const h2Style = {
  fontSize: '20px';
  color: 'black';
}
const spanStyle = {
  color: 'white';
}

const Main = () => {
    return (
        <h2 style={h2Style}>Hello<span style={spanStyle}>Test</span></h2> 
   );
}

ou plus clairement :

const styles = {
  h2: {
    fontSize: '20px';
    color: 'black';
  },
  span: {
    color: 'white';
  }
}

const Main = () => {
    return (
        <h2 style={styles.h2}>Hello<span style={styles.span}>Test</span></h2> 
   );
}

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 :

import "./your-css.css";

const Main = () => {
    return (
        <h2 className="title">Hello<span>Test</span></h2> 
   );
}

Parmi eux, .your-css.css le fichier contient

.title {
  fontSize: '20px';
  color: 'black';
}

.title span {
  color: 'white';
}

Même imbriqué (si vous utilisez un préprocesseur comme .scss)

.title {
  fontSize: '20px';
  color: 'black';

  span {
    color: 'white';
  }
}

CSS-in-JS

En envisageant une solution plus « React », nous pourrions utiliser CSS-in-JS comme styled-components En savoir plus

import React from 'react';
import styled from 'styled-components';

const Title = styled.h2`
  fontSize: '20px';
  color: 'black';

  span {
    color: 'white';
  }
`;

const Main = () => {
    return (
        <Title>Hello<span>Test</span></Title> 
   );
}

export default Main;