How can I prevent className from being hashed in NextJS?

Question

Our team uses Google Tag Manager and Optimizely in our Nextjs application. Both of these tools use CSS selectors to target sections of the page. We are using CSS Modules

Every time we deploy code, our class name are hashed and will break the selectors because the classname has been changed.

<div class="Button_test__1iM5u">

How can I add a classname along side of the hash classname? Or something that allows me to have a class that does not get hashed every deployment.

<div class="ButtonTest Button_test__1iM5u">

Ash Archin · Accepted Answer · 2021-11-17 21:55:34Z

1

TLDR: <div className={`constant-class ${styles.cssModuleClass}`} /> or use aria or data attributes to query.

I figured this would be a common problem as things like e2e/webdriver tests would have a hard time with it too.

This is a similar question, and it seems you can configure either webpack to handle the styles or add a 'constant' className prefix (which you can still query with CSS selectors), which points to this discussion.

edited Nov 17, 2021 at 21:55

Ash Archin

4611 gold badge9 silver badges26 bronze badges

answered Nov 17, 2021 at 17:57

Joe

1628 bronze badges

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

Collectives™ on Stack Overflow

How can I prevent className from being hashed in NextJS?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related