React开发中能否将styled-components样式转换为独立CSS文件？

• 先区分原有样式里的静态内容和动态内容，纯固定的样式可以直接复制到CSS文件中，不需要额外调整。
• 你示例中用到的theme相关属性，需要先把主题配置统一提取为CSS自定义属性（CSS变量），先在全局CSS文件中定义所有主题值：

:root {
  /* 替换为你项目中theme对应的实际色值 */
  --palette-text-secondary: #666;
  /* 替换为你项目中theme.spacing(1)对应的实际像素值，这里以通用的8px为例 */
  --spacing-base: 8px;
}

• 你给出的两段示例样式转换后对应CSS写法如下：
  原color: theme.palette.text.secondary转换为：

  color: var(--palette-text-secondary);
  

  原padding: theme.spacing(2)转换为两种可选写法：

  /* 直接写计算后的固定值 */
  padding: 16px;
  /* 用CSS变量计算，后续改主题时只需要改--spacing-base就可以全局生效 */
  padding: calc(var(--spacing-base) * 2);
  

• 如果原有styled-components里存在根据组件props切换的动态样式，比如根据激活状态变色的逻辑，你可以改成在CSS里定义不同状态的类名，在React组件中根据状态切换类名即可，比如：

/* CSS里定义不同状态样式 */
.btn {
  background: #fff;
}
.btn.active {
  background: #f00;
}

// React组件里切换类名
<button className={`btn ${isActive ? 'active' : ''}`}>按钮</button>

• 迁移时可以逐个组件处理，先移静态样式，再处理主题相关样式，最后调整动态样式，迁移过程不会影响项目正常运行。

内容的提问来源于stack exchange，提问作者Thiago lourenço