在React中的css中使用this.state

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color: 'red',
    };
  }

  render() {
    const { color } = this.state;

    return (
      <div style={{ color: color }}>
        This is a React component with dynamic CSS.
      </div>
    );
  }
}

export default MyComponent;

import React, { Component } from 'react';
import styles from './MyComponent.module.css';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color: 'red',
    };
  }

  render() {
    const { color } = this.state;

    return (
      <div className={styles.container}>
        <div className={`${styles.text} ${styles[color]}`}>
          This is a React component with dynamic CSS.
        </div>
      </div>
    );
  }
}

export default MyComponent;