Bagaimana untuk menambah css tag anak berdasarkan tag induk dalam React?

Question

rreeee

Nota: boleh menjadi dinamik. H2 ialah teg induk dan saya telah menggunakan gaya dalam teg yang sama dan saya mahu ia digunakan pada teg anak juga ().

Answer 1

Atribut gaya JSX adalah serupa dengan atribut gaya HTML. Kedua-dua atribut gaya dan atribut hanya menerima sifat CSS. Oleh itu, penggunaan pemilih, unsur pseudo atau kelas pseudo tidak dibenarkan.

Gunakan atribut gaya

Ganti yang berikut:

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

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

dengan:

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

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

atau lebih jelas lagi:

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> 
   );
}

Namun, memandangkan anda hanya mahu menentukan gaya untuk elemen h2, kami mempunyai lebih banyak pilihan:

CSS/SCSS

Gunakan CSS pada fail berasingan:

import "./your-css.css";

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

Antaranya, .your-css.css fail mengandungi

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

.title span {
  color: 'white';
}

Sekalipun bersarang (jika anda menggunakan prapemproses seperti .scss)

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

  span {
    color: 'white';
  }
}

CSS-dalam-JS

Menimbang penyelesaian yang lebih "React" kami boleh menggunakan CSS-in-JS seperti styled-components Ketahui lebih lanjut

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;