如何在React中为嵌套组件重写CSS模块？

npm install --save react-css-modules

.container {
  padding: 10px;
}

.title {
  font-size: 20px;
}

.content {
  margin-top: 10px;
}

import React from 'react';
import styles from './styles.module.css';

class MyComponent extends React.Component {
  render() {
    return (
      <div className={styles.container}>
        <h1 className={styles.title}>Hello, World!</h1>
        <div className={styles.content}>
          This is the content of the component.
        </div>
      </div>
    );
  }
}

import React from 'react';
import styles from './styles.module.css';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  render() {
    return (
      <div className={styles.container}>
        <h1 className={styles.title}>Hello, World!</h1>
        <div className={styles.content}>
          This is the content of the parent component.
          <ChildComponent className={styles.child} />
        </div>
      </div>
    );
  }
}