NextJS How to add component level css based on conditions

Question

In my nextjs-app, I have a component where I want to add conditional styling.

So I have made a component-level stylesheet MyComponent.module.css, which has:

.primary {
  color: blue;
}

.secondary {
  color: orange
}

Then, in my component, I tried to do this:

import styles from "./MyComponent.module.css"

export default function MyComponent({ text, type }) {

  return (
    <button className={`${type === "primary" ? styles.primary : styles.secondary}`}>
      {text}
    </button>
  )

}

but this doesn't work e.g. returns undefined

So, how can I solve this?

Jay F. · Accepted Answer · 2022-11-28 12:56:10Z

2

Try removing the backticks.

import styles from "./style.module.css";
const App = () => {
    const type = "primary";
    const text = "Hello"
    return (
        <div className={type === "primary" ? styles.primary : styles.secondary}>
            {text}
        </div>
    );
};
export default App;

answered Nov 28, 2022 at 12:56

Jay F.

3141 silver badge4 bronze badges

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

Collectives™ on Stack Overflow

NextJS How to add component level css based on conditions

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related