styled-components의 신기한 구조(태그명＋문자열)를 간단한 샘플로 재현

동작 샘플

styled-component의 「태그명 ` css의 스타일 정의 `

タグ名 뒤에 괄호 없이 갑자기 ` 템플릿 문자열 ` 가 나타나는 사람입니다.

const TestDiv = styled.div`
  color:blue;
  font-size:20pt;
`;`

이것은 태그가 있는 템플릿 의 구문으로, 함수에 캐릭터 라인을 건네주는 것과 거의 같은 것이 할 수 있는 것 같습니다. 자세한 것은 링크처에서 확인해 주십시오.

function tag(strings) {
  console.log(strings.raw[0]);
}
tag`string text line 1 \n string text line 2`;
// tag('文字列');

styled-components의 작동 방식을 재현하는 최소 샘플 코드

이런 느낌으로 사용할 수 있는 「뭐라고 해서 styled-componsnts」를 만들어 봅니다.

// 「なんちゃってstyled-componsnts」を関数として呼び出して、コンポーネントを取得
const Tag1 = pTag('color:red;');

// 「なんちゃってstyled-componsnts」をタグ付きテンプレートとして呼び出す
const Tag2 = pTag`
color:blue;
font-size:20pt;
`;

// Tag2はborderをprops経由で渡す
return (
  <div className="App">
    <Tag1>Tag1</Tag1>
    <Tag2 style={{border:'1px solid green'}}>Tag2</Tag2>
  </div>
);

소스 전체

구조 자체는 어렵지 않습니다. <style> 태그와

태그를 세트로 작성해, 독특한 class명을 붙여, style의 적용을 하고 있습니다.

let seq = 0; // classNameを重複させないためのシーケンス番号

// 「<p>タグ＋スタイル設定」コンポーネントを返す「なんちゃってstyled-componsnts」
const pTag = (styles: ReadonlyArray<string> | string) => {
  return (props: any) => {
    // class名を生成(重複しないようにseqをカウントアップ)
    const clsNm = `clsNm${seq++}`;

    // <style>タグを<p>をセットで生成する
    // 重複しないclass名でタグとセレクタを作成する
    // propsはpタグに引き渡す
    return (
      <>
        <style>.{clsNm} {'{'}{styles}{'}'}</style>
        <p className={`${clsNm}`} {...props}>{props.children}</p>
      </>    
    )
  }
};

// 「なんちゃってstyled-componsnts」を関数として呼び出して、コンポーネントを取得
const Tag1 = pTag('color:red;');

// 「なんちゃってstyled-componsnts」をタグ付きテンプレートとして呼び出す
const Tag2 = pTag`
color:blue;
font-size:20pt;
`;

// 生成したコンポーネントを表示する
function App() {
  return (
    <div className="App">
      <Tag1>Tag1 props.childrenに渡す文字列</Tag1>
      <Tag2 style={{border:'1px solid green'}}>Tag2 props.childrenに渡す文字列</Tag2>
    </div>
  );
}

export default App;

생성된 화면 이미지

지정한 스타일이 적용되었음을 알 수 있습니다.

생성된 DOM

참고 페이지

Demystifying styled-components