注:可以動態(tài)。 H2是父標簽，我在同一個標簽中應用了樣式，我希望它也適用于子標簽()。

JSX風格屬性類似于HTML的風格屬性。style屬性和attribute都只接受CSS屬性。因此，不允許使用選擇器、偽元素或偽類。

使用樣式屬性 替換以下內(nèi)容:

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

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

使用:

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

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

或者更容易辨認:

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

但是，因為您希望只定義h2元素的樣式，所以我們有更多的選項:

CSS / SCSS 使用CSS，在單獨的文件上:

import "./your-css.css";

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

哪里，。您的-css.css文件包含

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

.title span {
  color: 'white';
}

或者甚至是嵌套的(如果您使用像。scss)

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

  span {
    color: 'white';
  }
}

CSS-in-JS 想著一個更& quot反應& quot解決方案，我們可以使用CSS-in-JS，就像樣式化組件一樣

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;