Style

대분류

프레임워크

소분류

Next.js

유형

Modules

Styles JSX

최종 편집 일시

2024/10/30 02:50

생성 일시

2023/07/25 04:23

15 more properties

Modules

•

NavBar.module.css

.link {
  text-decoration: none;
}
.active {
  color: tomato;
}
CSS
복사

•

NavBar.tsx

...
import styles from './NavBar.module.css';
...
    <nav>
      <Link href="/" className={
				`${styles.link} ${pathname === '/' ? styles.active : ""}`}> 
				{/* styles에서 .link호출 */}
        Home
      </Link>
      <Link href="/about" className={
        [pathname === '/about' ? styles.active : ""].join(" ")}>
				{/* styles에서 .active호출 */}
...
TypeScript
복사

Styles JSX

•

다음과 같은 태그 이름 사용 가능 

<style jsx>{`
    nav {
      background-color: tomato;
    }
    a {
      text-decoration: none;                
    }
`}</style>
CSS
복사

export default function Page() {
  return (
    <div>
    <NavBar/>
    <h1 className='active'> hello, index </h1>
    <style jsx>{`
      a {
        color: while;
      }
    `}</style>
    </div>
  );
}
TypeScript
복사

특징

클래스 이름에 관해서 생각할 필요X

부모 컴포넌트가 그 클래스 이름을 사용하고 있을지라도 상관X

사용된 컴포넌트에만 영향을 미치며, 스타일을 전역으로 활용하기 위해서는 global 이라는 속성을 사용

상태에 영향을 받는 스타일은 컴포넌트 내에 작성하며, 상태에 영향을 받지 않는 스타일은 스타일 객체로 관리할 수 있다.

정적 및 동적 스타일링

import css from "styled-jsx/css";
import { useState } from "react";

// 정적 스타일 (상태에 영향을 받지 않는)
const style = css`
  button {
    background-color: #ff23ff;
  }
`;

const index = () => {
  const [isRed, setIsRed] = useState(false);
  return (
    <>
      <div className="title">Hello, World!</div>
      <button
        onClick={() => {
          setIsRed((prev) => !prev);
        }}
      >
        색상 변경
      </button>
      <style jsx>{style}</style>
      {/* 동적인 스타일 (상태에 따라 색상 변경) */}
      <style jsx>
        {`
          .title {
            color: ${isRed ? "red" : "black"};
          }
        `}
      </style>
    </>
  );
};

export default index;
JavaScript
복사