Javascript variables in css are not working

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

do you see the size class inside your HTML? or `menu-item` is all you see? — izik, Sep 06 '20 at 12:20

score 1 · Answer 1 · answered Sep 06 '20 at 12:31

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

score 0 · Answer 2 · answered Sep 06 '20 at 11:12

0

To use variables inside a string like this, you need to use the following syntax:

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

answered Sep 06 '20 at 11:12

dantheman

3,189
2
10
18

single quotation marks instead of double quotation marks ?? – Dhaya Mohan Sep 06 '20 at 11:14

underscore · Answer 3 · 2020-09-06T11:17:24.267

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

}

Javascript variables in css are not working

3 Answers3