styled-componentsの不思議な仕組み(タグ名+文字列)を簡単なサンプルで再現
9265 ワード
- 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>タグと<p>タグをセットで作成し、ユニークな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
参考ページ
Author And Source
この問題について(styled-componentsの不思議な仕組み(タグ名+文字列)を簡単なサンプルで再現), 我々は、より多くの情報をここで見つけました https://qiita.com/murasuke/items/8568b1629a08f89dcf06著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .