css.module 조건부 스타일 근본

classnames 안쓰면 그냥 이렇게 해야해야함.

근데 난 종속성 싫어서 그냥 이런식으로 씀. 유딩도 알아볼 수 있는 코드가 좋다 

// MyComponent.js

import React from 'react';
import styles from './MyComponent.module.css';

const MyComponent = ({ isSpecial }) => {
  // 조건에 따라 클래스를 동적으로 할당
  const containerClassName = isSpecial ? styles.specialContainer : styles.normalContainer;

  return (
    <div className={containerClassName}>
      <p className={styles.text}>Hello, World!</p>
    </div>
  );
};

export default MyComponent;

 

링크 조건부 스타일은  이런식으로

https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#checking-active-links

Routing: Linking and Navigating | Next.js