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
– izik, Commented Sep 6, 2020 at 12:20

Alina Koren · Accepted Answer · 2020-09-06 12:31:36Z

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

answered Sep 6, 2020 at 12:31

Alina Koren

638 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dantheman · Accepted Answer · 2020-09-06 11:12:37Z

0

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

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

answered Sep 6, 2020 at 11:12

dantheman

3,8642 gold badges12 silver badges25 bronze badges

1 Comment

Dhaya Mohan Over a year ago

single quotation marks instead of double quotation marks ??

underscore · Accepted Answer · 2020-09-06 11:17:24Z

0

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

}

edited Sep 6, 2020 at 11:17

answered Sep 6, 2020 at 11:13

underscore

6,9277 gold badges44 silver badges82 bronze badges

Collectives™ on Stack Overflow

Javascript variables in css are not working

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related