react style modules deep

在React中，使用`style.module.css`文件来管理组件的样式，这种方式被称为CSS Modules。它允许你在每个组件内部创建私有的、隔离的样式，通过`.module`扩展名导入并应用到对应的元素上。React Module CSS（如`styles.from('./style.module.css')`）会自动处理类名的深度嵌套，当你在组件的`className`属性中使用这些类时，它们会被转换成一个独特且易于管理的形式。

比如，在`Hello.js`组件中，`.homeWrapper`类会变为组件内部的一个唯一标识，即使在其他地方有相同的类名，React也会根据组件路径和名称保证它们不会冲突：

// Hello.js
import React from 'react';
import styles from './style.module.css';

function Hello(props) {
  return (
    <div className={`${styles.homeWrapper}`} />
  );
}

export default Hello;

这样，`<div className={`${styles.homeWrapper}`} />`将会应用`.homeWrapper`样式，而且这个类名只在这个组件内部可见，提高了代码的可维护性和样式隔离性[^1, ^2]。