意外的模板字符串表达式.slintno-template-curly-in-string

Question

我收到这个错误：

"类"已定义，但从未使用过。意外的模板字符串表达式。

我应该在代码中更改什么？有什么办法吗？如果你想看代码，请告诉我，我会更新更多吗？

Button.js

import classes from "../styles/Button.module.css";
export default function Button(className, children) {
return <div className={'${classes.button} ${className}'}>{children}</div>;}

Button.module.css

.button {
background: var(--successGreen);
color: var(--fontPrimary);
padding: 0.6rem 1.2rem;
font-weight: 600;
font-size: 15px;
text-transform: uppercase;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 8px;
cursor: pointer;
border: 0px;
}
.button:hover {
background: var(--fontPrimary);
color: #fff;
}
.button:hover span {
color: #fff;
}

Answer 1

eslint规则是关于在JSX中使用带引号的字符串时替换大括号。

<div stringProp={'foo'} /> // warning
<div stringProp="foo" />   // correct (no warning)

然而，在您的示例中，我相信您只是忘记将单引号替换为倒钩(`(。

className={`${classes.button} ${className}`}