Figma Dev Mode导出的组件样式在React中不生效怎么办？

Mr-景叶提问于 2026-02-16 04:41:37 阅读 27

工具

我用Figma Dev Mode导出的按钮组件CSS，在React项目里直接复制粘贴后样式完全没效果。按钮显示成默认的方形，颜色也没变化。之前按照文档配置了正确的类名，但检查元素发现CSS变量好像没被解析？

这是我的测试代码：


import styles from './Button.module.css';

function Button() {
  return (
    <button className={${styles.button} ${styles['button--primary']}}>
      Click me
    </button>
  );
}
export default Button;

导出的CSS里确实有对应的.button和.button–primary类，但浏览器里这些类的样式都显示为灰色，像是未应用的状态。我尝试过清除缓存、重新导出文件，甚至把CSS直接写在组件里都没用。是不是哪里配置漏掉了？

Dev Mode Figma

我来解答赞 8 收藏

反馈

1 条解答

南宫云霞 Lv1

你这个问题大概率是CSS Modules的类名没处理对。Figma导出来的CSS变量可能依赖全局作用域，但你在React里用了CSS Modules，类名被自动重命名了，所以样式挂不上。

把CSS文件改成普通的全局样式引入试试，像这样：

import './Button.css';



function Button() {

  return (

    <button className="button button--primary">

      Click me

    </button>

  );

}

export default Button;

如果非要用CSS Modules，就把Figma导出的CSS变量手动改成内联样式或者全局样式，应该能用。记得检查一下导出的CSS里有没有:export这种语法，有的话删掉，那不是标准CSS。

2026-02-16 09:04