Modern CSS - Styled JSX

Styled JSX

Styled JSX란 컴포넌트의 스타일을 지정하기 위해 사용하는 경량 CSS-in-JS 라이브러리로, 캡슐화되고 범위 지정(scoped)된 CSS를 작성할 수 있게 해준다. Next.js에 의해 만들어졌고 유지되며, Next.js에 기본 포함되어 있다.

 

Styled JSX 사용법

기본 사용법

JSX라는 값을 속성으로 갖는 스타일 태그를 컴포넌트 본문에 삽입한 후, 스타일을 CSS 양식대로 작성하면 된다.

<>
  <div className="container">컨테이너</div>
  // `(백틱)에 유의
  <style jsx>` // 전역 사용시 <style jsx global>
    .container {
      font-size: 20px;
    }
  `</style>
</>

 

스타일 객체

또는 아래처럼 객체를 따로 만들어서 사용해도 된다.

import css from "styled-jsx/css";

// 스타일 객체
const testStyle = css`
  .title {
    color: red;
  }
`;

// 컴포넌트 본체
const index = () => {
  return (
    <>
      <div className="title">Hello, World!</div>
      <style jsx>{testStyle}</style>
    </>
  );
};

 

스타일 스플리팅

상태(state)에 따라 동적으로 스타일을 부여할 수도 있다. 이 경우, 스타일 객체가 아닌 컴포넌트 내에 작성해야 한다.

const title = () => {
	const [state, setState] = useState(false);
	return (
    	<div className="title">타이틀</div>
        <style jsx>
        {`
          .title {
            color: ${state ? "white" : "black"};
          }
        `}
</style>
    )
}

 

공식 문서

https://github.com/vercel/styled-jsx

GitHub - vercel/styled-jsx: Full CSS support for JSX without compromises