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

,

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

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

,

您应该将它们包装在反引号（``）中：

const MenuItem = ({title,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>
    );

}