如何从Amplify同步Figma生成的React组件中提取内联CSS

手动提取转换（适合少量组件） #

• 定位组件内的内联样式：找到每个React组件里的style={{...}}代码块，复制其中的样式键值对。
• 创建CSS模块文件：为每个组件新建对应的[组件名].module.css文件，将提取的样式转为类选择器规则。例如：
  原内联样式：

  <Button style={{ backgroundColor: '#2563eb', padding: '12px 24px', borderRadius: '4px' }} />
  

  转为CSS模块：

  /* Button.module.css */
  .primaryButton {
    background-color: #2563eb;
    padding: 12px 24px;
    border-radius: 4px;
  }
  

• 替换组件内的样式引用：在组件中导入CSS模块，用className替代style属性：

  import styles from './Button.module.css';
  
  <Button className={styles.primaryButton} />
  

• 提取公共样式：把多个组件重复使用的样式（比如通用间距、文本颜色）放到公共CSS模块（如common.module.css）中，统一引用。

批量处理工具（适合大量组件） #

• 自定义Node.js脚本：写一个脚本遍历所有生成的组件文件，用正则匹配内联样式对象，自动生成对应的CSS模块并替换组件代码。示例正则可匹配style={({[^}]+})}，捕获样式内容后转换为CSS规则。
• 使用babel-codemod：编写转换脚本，借助Babel的AST处理能力，批量将组件内的内联style属性替换为CSS模块的className引用，效率更高。

从根源调整Amplify生成配置 #

• 检查Amplify Studio设置：在Figma同步生成组件的环节，查看Amplify Studio是否提供样式方案选项（比如CSS模块、Tailwind），部分版本支持直接指定生成非内联样式的组件。
• 自定义生成模板：如果Amplify允许自定义组件模板，修改模板中的样式输出逻辑，让生成的组件默认使用CSS模块而非内联样式，避免后续重复修改。

相关文档参考 #

• Amplify官方文档的「自定义生成组件」章节：查看关于样式生成的进阶配置说明，确认是否有可直接调整的选项。
• React官方文档的「CSS模块」部分：掌握CSS模块的基础使用方式，确保转换后的组件样式引用正确。

内容的提问来源于stack exchange，提问作者Dayron Gallardo