Using style from a NextJS module CSS stylesheet

Question

I have a stylesheet for a button which is located at styles/Button.module.css and i am trying to use it in my NextJS project but can't seem to get it going.

In my component, i have imported the stylesheet normally, i.e;

import Button from '../styles/Button.module.css';

Then i am trying to add it to the return in a component, like so;

<button onClick={e => login(e)} className={"text-white bg-indigo-600 " + (loading ? "Button.btn-loading" : "")}>
    Login
</button>

But the styles don't seem to be pulling through.

Any help would be greatly appreciated

Badal Saibo · Accepted Answer · 2021-02-02 11:24:54Z

1

"Button.btn-loading" is invalid. Button is an imported JS object, hence you need to remove the quotes to evaluate the JS object notation.

<button onClick={e => login(e)} className={"text-white bg-indigo-600 " + (loading ? Button['btn-loading'] : "")}>
    Login
</button>

That's why CSS Modules recommends using camelCase class names, so that we can use dot notation instead of bracket notation to get the values.

I'd suggest using template literals for more cleaner syntax

<button onClick={e => login(e)} className={`text-white bg-indigo-600 ${loading ? Button['btn-loading']: ""}`}>
    Login
</button>

edited Feb 2, 2021 at 11:24

answered Feb 2, 2021 at 11:06

Badal Saibo

3,9031 gold badge18 silver badges30 bronze badges

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

3 Comments

BigJobbies Over a year ago

Hey, I am getting a btn is not defined error now

BigJobbies Over a year ago

I manged to sort that error out by putting quotes around the class, like 'btn-loading' ... Thank you for your help!

Badal Saibo Over a year ago

Oh you're right, you need quotes inside a bracket notation. I've edited the answer. Thanks to you too!

Collectives™ on Stack Overflow

Using style from a NextJS module CSS stylesheet

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related