みかづきブログ・カスタム

基本的にはちょちょいのほいです。

styled-components

styled-componentsでリキッドレイアウトを再現するために画面幅に合わせたサイズを計算する関数をつくる 📱

ことの発端 以前、vwを使って画面幅に合わせたサイズ調整を行うモックをつくりましたが、今回はそれを簡単に設定できるユーティリティ関数を作ろうと思いました。 ひとつひとつを手書きで書いていくのは非常に骨が折れるからです。blog.kimizuka.org 方針と…

Next.js + styled-components でページ表示時に一瞬スタイルが当たってない状態が表示されるのを防ぐ 💻

Next.js + styled-componentsでウェブサイトを作り始めてから、ずーっと気になっていました。 ページ表示時に一瞬スタイルが当たってない状態が表示のが。が。ついに、その解決方法を見つけました。この、サーバサイドレンダリングを使えば解決します。style…

Next.jsとstyled-componentsを併用すると、warning " > styled-components@5.2.3" has unmet peer dependency "react-is@>= 16.8.0".というワーニングがでるのを解決する 🚨

※ next(10.1.2)とstyled-components(5.2.3)にて確認Next.jsとstyled-componentsを併用すると、yarn や npm install の際に、 warning " > styled-components@5.2.3" has unmet peer dependency "react-is@>= 16.8.0". というワーニングが出るので、若干…

TypeScript + styled-componentsにpropsを渡す 🎁

公式のAPIリファレンスにTypeScriptとカスタムpropsを組み合わせて使う方法が記載されてました。styled-components.comシンプルなものであれば、 const Text = styled.p<{ color: string; }>` color: ${ ({ color }) => color }; `; という感じで定義できま…

styled-componentsでCSSアニメーションを使ってもうまくいかない場合は記述位置を確認する 🔍

最近は、もっぱらNext.js + styled-componentsでウェブサイトを作っております。 そんな折、動作原理を考えたら当然の挙動なのですが、一瞬ハマったのでメモを残します。 ことの発端 const BtnWrapper = styled.div` position: relative; width: 44px; heigh…

SCSSの@forをstyled-componentsで書き換える 🔁

Nuxt.js + styled-componentsで開発をしているのですが、SCSSのような感じで、 SCSS ol { @for $i from 0 through 10 { li:nth-child(#{$i + 1}) { &:before { content: '#{$i}'; } } } } こちらをstyled-componentsに書き換えてみると、 styled-components …

Next.jsにTypeScript、SCSS、styled-componentsを導入する 📄

Next.jsのプロジェクト作成方法 TypeScript導入方法 SCSS導入方法 styled-components導入方法 .babelrc Next.jsのプロジェクト作成方法 yarn create next-app app(以下のコマンドはappディレクトリ以下で行う) TypeScript導入方法 yarn add -D typescript …