Figma Dev Mode导出的组件样式在React中不生效怎么办？
我用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直接写在组件里都没用。是不是哪里配置漏掉了？
2 条解答
让我帮你一步步排查。
先看看你从 Figma 导出的 CSS 文件内容，大概会长这样：
问题就在这里 — 这些
var(--figma-xxx)变量根本没定义，所以浏览器解析不出来，样式自然不生效。解决方案有两个思路：
思路一：手动定义这些变量
打开你的 CSS 文件，在顶部把变量定义加进去：
变量值从哪里来？你在 Figma 里选中对应元素，右侧面板能看到具体的颜色、间距数值，照着填就行。
思路二：用 Figma 的 Design Token 插件导出变量
手动一个一个填太累了。你可以装 Figma 的 Token Studio 插件，它能直接把设计稿里的颜色、间距这些生成成 CSS 变量文件，导出后直接在项目里 import 就行，一劳永逸。
再提醒一个 CSS Modules 的坑：
你代码里这样写是对的：
但如果 Figma 导出的原始 CSS 里用的是
button.button--primary这种后代选择器，在 CSS Modules 下会出问题，因为类名被哈希化了。选择器在编译后的 DOM 里根本找不到对应的元素。所以导出的 CSS 最好检查一下，确保用的是单个类名，而不是复杂的选择器链。
总结一下：先去 Figma 导出的 CSS 文件里，把所有
var(--xxx)变量复制出来，在你的 CSS 文件顶部定义一遍，样式就能生效了。变量值就是 Figma 面板里显示的那些颜色和数值。把CSS文件改成普通的全局样式引入试试，像这样：
如果非要用CSS Modules，就把Figma导出的CSS变量手动改成内联样式或者全局样式，应该能用。记得检查一下导出的CSS里有没有:export这种语法，有的话删掉，那不是标准CSS。