【React】Styled-components導入時のメモ

CSS in JS。
コンポーネント内にCSSを記述できるのでスコープが明確になる。

TypeScriptを使用するので、@types/styled-componentsをインストール。
TypeScript内のCSSの補完を行いたいので、typescript-styled-pluginもインストール

インストール

$ npm install --save-dev styled-components @types/styled-components typescript-styled-plugin

tsconfig.jsonの変更

以下を追加

{
  "compilerOptions": {
    ...
    "plugins": [{ "name": "typescript-styled-plugin" }]
    ...
  }
}

ThemeProviderはめちゃめちゃ便利そう。
styled-components を試す - アカベコマイリ

defaultPropsはThemeProviderと組合わえてテーマ設定をデフォルトとして使うときに良さげ。
styled-componentsの使い方(パッとわかりやすく、色々なパターンを説明することを目指しています) · GitHub

VSCode拡張の設定

vscode-styled-components - Visual Studio Marketplace

[参考]
styled-componentsのベーシックな使い方 |
⭐ styled-componentsの使い方(パッとわかりやすく、色々なパターンを説明することを目指しています) · GitHub
⭐ styled-components を試す - アカベコマイリ