CSS-in-JS

Examples

기존의 모든 CSS-in-JS 솔루션을 사용할 수 있습니다. 가장 간단한 방법은 인라인 스타일입니다:

function HiThere() {
  return <p style={{ color: 'red' }}>hi there</p>
}
 
export default HiThere

우리는 격리된 스코프 CSS 지원을 제공하기 위해 styled-jsx (opens in a new tab)를 번들로 제공합니다. 이는 Web Components와 유사한 "섀도우 CSS"를 지원하는 것을 목표로 하지만, 이는 서버 렌더링을 지원하지 않으며 JS 전용 (opens in a new tab)입니다.

다른 인기 있는 CSS-in-JS 솔루션(예: Styled Components)에 대한 예제는 위를 참조하세요.

styled-jsx를 사용하는 컴포넌트는 다음과 같습니다:

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}
 
export default HelloWorld

더 많은 예제는 styled-jsx 문서 (opens in a new tab)를 참조하세요.

JavaScript 비활성화

예, JavaScript를 비활성화하면 프로덕션 빌드(next start)에서 CSS가 여전히 로드됩니다. 개발 중에는 Fast Refresh (opens in a new tab)를 사용하여 최고의 개발자 경험을 제공하기 위해 JavaScript가 활성화되어 있어야 합니다.

Tailwind CSS Sass