🐣
styled-componentsの基本的な使い方
はじめに
普段は主にCSSModuleを用いているのですが、最近styled-componentsに触れる機会があったので簡単に覚え書きメモです。
styled-componentsの基本
styled-componentsを使うことで、その名の通り、スタイルをコンポーネントとして持つことができます。
基本としておさえておくべき点は以下です。
- ComponentName：コンポーネントとして使いたい名前
- div：スタイルを適用するタグ名（以下はdiv）
- ``：反映するスタイル定義
const ComponentName = styled.div`
color: xxx;
border: xxx;
background-color: xxx;
~~~
`;
実際に使ってみる
本記事では、以下画像の赤いborder部分をstyled-componentsを使ってスタイル適用させてみます。
通常のスタイル適用
スタイルはstyles.cssからimportして適用しています。
className="borderRed"に対してスタイルを当てています。
index.tsx
import "./styles.css";
const HonyaItem = () => {
return (
<div className="borderRed">ほにゃほにゃほにゃ</div>
)
}
styles.css
.borderRed {
border: 3px solid red;
}
styled-componentsを使ったスタイル適用
styled-componentsを使って書いてみるとこんな感じです。
index.tsx
import styled from "styled-components";
const borderRedContainer = styled.div`
border: 3px solid red;
`;
const HonyaItem = () => {
return (
<borderRedContainer>ほにゃほにゃほにゃ<borderRedContainer>
)
}
borderRedContainerでstyled-componentを使いスタイル適用するコンポーネントを作成しています。
通常のコンポーネントと同様に、<borderRedContainer>として呼び出すことで使うことができます。
まとめ
今回は覚書としてまとめましたが、styled-componentsを使うことで幅広いスタイル適用が可能です。
今後も応用的な書き方を勉強していきたいと思います。
Discussion