Unexpected template string expression.eslintno-template-curly-in-string-CodePudding

I'm getting this error:

'classes' is defined but never used. Unexpected template string expression.

What should I change in my code? Is there any way to do it? In case you want to see the code please let me know, I will update more?

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;
}

CodePudding user response：

The eslint rule is about replacing the curly brackets when using strings in JSX with quotes.

<div stringProp={'foo'} /> // warning

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

In your example however I believe you just forgot to replace your single quotes with backticks (`).

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