Nextjs: Avoid change css className after run

Question

This is my code:

<div className={styles.name}></div>

After run the app, in inspect element my class changed to this:

style_name__AYkko

How can I stop it?

What do you expect {styles.name} to resolve to on render? This is part of CSS modules to scope CSS, add unique identifiers, to avoid clashing with other CSS the in the application. You could always just use className="theClassYouWant" instead of CSS modules. — Alexander Staroselsky
– Alexander Staroselsky, Commented Apr 25, 2022 at 14:05
If you stop it, it will no longer work.. So I wouldn't try to do that. It looks like you're using CSS modules. In order for them to work as intended, they need to have a unique name so they do not interfere with other modules. — Brian Thompson
– Brian Thompson, Commented Apr 25, 2022 at 14:06

giosan · Accepted Answer · 2022-04-25 14:22:29Z

2

The only way you can do what you want to do is importing your stylesheet inside _app.js to have it globally scoped and avoid using css-modules. At this point you can use your classes inside regular classNames without getting the unique hash on inspected elements

answered Apr 25, 2022 at 14:22

giosan

4071 gold badge9 silver badges20 bronze badges

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

Comments

pugia · Accepted Answer · 2024-02-24 10:01:39Z

0

You can wrap the class definition in a :global {} block

:global {
    .name {
        // css definitions
    }
}

answered Feb 24, 2024 at 10:01

pugia

4421 gold badge4 silver badges11 bronze badges

Collectives™ on Stack Overflow

Nextjs: Avoid change css className after run

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related