css 中的 Javascript 变量不起作用

Question

In this code i am passing both imageurl and size which are javascript variables but i am using in css. css is not considering both. How to resolve this issue ??

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

Answer 1

This should work:

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

Answer 2

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

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

Answer 3

You should wrap them in back-ticks ( `` ):

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

}