如何使用React组件类语法声明样式化组件

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      // 组件的结构和内容
    );
  }
}

render() {
  return (
    <div className="my-component">
      <h1>Hello, World!</h1>
      <p>This is a styled component.</p>
    </div>
  );
}

// 内联样式
render() {
  const styles = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px',
  };

  return (
    <div style={styles}>
      <h1>Hello, World!</h1>
      <p>This is a styled component.</p>
    </div>
  );
}

// 使用CSS类
render() {
  return (
    <div className="my-component">
      <h1>Hello, World!</h1>
      <p>This is a styled component.</p>
    </div>
  );
}

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

ReactDOM.render(<MyComponent />, document.getElementById('root'));