css中的Javascript变量不起作用

在这段代码中，我传递了imageurl和size，它们是javascript变量，但我在css中使用。 css并不同时考虑两者。如何解决这个问题

const MenuItem = ({title, imageUrl, size}) => {
    return(
        <div className="${size} menu-item">
            <div className="background-image" style={{backgroundImage: "url(${imageUrl})"}} />
            <div className="content">
                <h1 className="title">{title.toUpperCase()}</h1>
                <span className="subtitle">SHOP NOW</span>
            </div>
        </div>
    );
}

const MenuItem=（{title，imageUrl，size}）=>{
返回(
{title.toUpperCase（）}
现在购物
);
}

要在这样的字符串中使用变量，需要使用以下语法：

className={`${size} menu-item`}

---

你应该用后面的记号（

`

）把它们包起来：

const MenuItem=（{title，imageUrl，size}）=>{
返回(
{title.toUpperCase（）}
现在购物
);
}

这应该可以：

const MenuItem = ({title, imageUrl, size}) => {
return(
    <div className={`${size} menu-item`}>
        <div className="background-image" style={{backgroundImage: "url(${imageUrl})"}} />
        <div className="content">
            <h1 className="title">{title.toUpperCase()}</h1>
            <span className="subtitle">SHOP NOW</span>
        </div>
    </div>
);
}

const MenuItem=（{title，imageUrl，size}）=>{
返回(
{title.toUpperCase（）}
现在购物
);
}

单引号而不是双引号？？您在HTML中看到大小类了吗？或

菜单项

是您看到的全部？

const MenuItem = ({title, imageUrl, size}) => {
return(
    <div className={`${size} menu-item`}>
        <div className="background-image" style={{backgroundImage: "url(${imageUrl})"}} />
        <div className="content">
            <h1 className="title">{title.toUpperCase()}</h1>
            <span className="subtitle">SHOP NOW</span>
        </div>
    </div>
);
}