Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Access className by template literal string not working

See original GitHub issue

So I am trying to access a className based on a template literal string and it’s not working.

WHAT WORKS: <div className={classNames(classes.box, classes.XYZcontentType)} />

WHAT DOES NOT WORK:

const prop = 'XYZ';
<div className={classNames(classes.box, classes[`${prop}contentType`])} />

I also tried:

const prop = 'XYZ';
 <div className={classNames( classes.box, { [`${prop}contentType`]: true } )} />

How can I get classNames to work with template strings that are generated dynamically?

Notes: I am using React.

Issue Analytics

State:
Created a year ago
Comments:7

Top GitHub Comments

1reaction

newyork-anthonyngcommented, May 13, 2022

@shiraz I created a demo in CodeSandbox. See here. The code works with a dynamically generate template string.

My guess is there’s something wrong with your application code. Can you provide an example that reproduces the issue?

0reactions

newyork-anthonyngcommented, May 17, 2022

@shiraz this is a react-jss and CSS question, and not relevant for this issue.

Top Results From Across the Web

change className to using template literals - Stack Overflow

Assuming that props.classes is a string, I would write your className like this: className={`${classes}.selectionList__sites`}.

Stack your classes within template literals | by Chris Nager

The purpose of this article is to share a simple technique I use that involves template literals, a useful feature of ES2015+.

Not detecting class names with template literals #6559 - GitHub

When class names are contained in template literal strings, they are not picked up by the parser unless a trailing space is supplied....

Template Literals | CSS-Tricks

The Template Literal, introduced in ES6, is a new way to create a string. With it comes new features that allow us more...

JavaScript Template Literals - W3Schools

Template literals provide an easy way to interpolate variables and expressions into strings. The method is called string interpolation. The syntax is:.