ESLint报错：'classes'未使用及模板字符串异常，求代码修复方案

你遇到的两个ESLint错误，对应代码里的明确问题，修复方法如下：

错误1：'classes' is defined but never used #

问题根源是你用单引号包裹了模板字符串，导致${classes.button}没有被解析为变量表达式，只是作为普通字符串存在，ESLint判定classes变量未被实际调用。

错误2：Unexpected template string expression #

模板字符串的语法要求必须用**反引号（`）**包裹，你用单引号包裹${}表达式属于无效语法，触发ESLint的语法校验报错。

额外修复：React组件参数问题 #

原组件的参数写法不符合React规范，React组件接收的是一个props对象，而非直接传入className和children参数，不修复的话组件无法正确获取外部传入的属性。

修复后的Button.js代码： #

import classes from "../styles/Button.module.css";

export default function Button({ className, children }) {
  return <div className={`${classes.button} ${className}`}>{children}</div>;
}

修复说明： #

• 将包裹模板字符串的单引号'替换为反引号`，让${classes.button}和${className}正常解析为变量值
• 组件参数改为解构props对象的写法{ className, children }，确保能正确获取外部传入的类名和子元素
• 修复后classes变量被实际调用，第一个ESLint错误自动消失；模板字符串语法合规，第二个错误也会解决

内容的提问来源于stack exchange，提问作者Marina Makarets