classnames를 활용한 module.scss 예제

[kimpra2989]

사용하는 컴포넌트

// page.tsx
import classNames from 'classnames/bind'      -- ( 1 ) classnames/bind를 import
import styles from './styels.module.scss'     -- ( 2 ) styles 파일을 import 

const cx = classNames.bind(styles);           -- ( 3 ) classNames를 통해 styles를 bind

const Home = () => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const toggleDarkMode = () => setIsDarkMode(!isDarkMode);

  return (
    <div className={cx('container', { darkMode: isDarkMode, lightMode: !isDarkMode })}>  -- ( 4 ) cx( ) 내부에 클래스명 작성
      <header className={cx('header')}>Welcome to My Website</header>
      <main className={cx('content')}>
        This is a simple homepage with dark mode and light mode toggle.
      </main>
      <footer className={cx('footer')}>© 2024 My Website</footer>
      <button onClick={toggleDarkMode}>
        Toggle {isDarkMode ? 'Light' : 'Dark'} Mode
      </button>
    </div>
  );
};

export default Home

스타일

//page.module.scss

// Home.module.scss
.container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.header {
  font-size: 24px;
  margin-bottom: 20px;
}

.content {
  font-size: 18px;
  margin-bottom: 20px;
}

.footer {
  font-size: 14px;
  color: gray;
}

.darkMode {
  background-color: #333;
  color: white;
}

.lightMode {
  background-color: #f9f9f9;
  color: black;
}

[kimpra2989]

결국 styles.container 이런 식으로 class명을 작성하는 거면 이게 의미가 있나?...