まえがき
今まではcssやsassファイルを読み込んだり、React Component内の色々なタグにstyle={...}を書き込んで、デザインを実装してきました。
styled componentsはReact Componentそのものです。
propsから条件 (三項) 演算子で当てるstyleの切り分けもできます。
HOCを使うこともできます。
CSSinJSとしてカテゴライズされるstyled componentsですが幅広い活用ができることを紹介していきます。
インストール
yarn add styled-components or npm install --save styled-components
今日のやることリスト
今回のサンプルです。 webpackbin (styledSample)
サンプルを見ながら話を進めます。
- styled componentsでとりあえず動かす。
- 状態に応じた任意のstyleを当てる。
- globalにstyleを当てる。
- React RouterやUI ライブラリなど別コンポーネントにstyleを当てる。
styled componentsでとりあえず動かす。
18 <Title>Hello styled component</Title>
13 export const Title = styled.h1`
14 font-size: 1.5rem;
15 text-align: center;
16 color: palevioletred;
17 margin-bottom: 3rem;
18 `;
styled.h1でstyled componentsが<h1>タグをラップしてhtml上ではCSS Modulesとして吐き出されます。
状態に応じた任意のstyleを当てる。
19 <ButtonGround>
20 <Button>Normal</Button>
21 <Button primary>Primary</Button>
22 </ButtonGround>
19 export const ButtonGround = styled.div`
20 width: 100%;
21 display: flex;
22 flex-direction: row;
23 margin-bottom: 3rem;
24 `;
25 export const Button = styled.button`
26 color: ${props => (props.primary ? '#fff' : '#000')};
27 background-color: ${props => (props.primary ? '#0275d8' : 'palevioletred')};
28 border-color: ${props => (props.primary ? '#0275d8' : 'palevioletred')};
...
43 `;
条件 (三項) 演算子でprops.primaryが存在するかしないかで値が変わります。
ここではprops.primaryが存在するとprimaryボタンとしてデザインが反映されます。
globalにstyleを当てる。
26 globalStyles;
50 export const globalStyles = injectGlobal`
51 html {
52 font-size: 16px;
53 }
54 `;
ここでは普段のcssと同じ感覚と気持ちで書く認識でいいと思います。
ただし、ここで何でも書きすぎると今までのようにcssの管理が大変になるので避けたいです。
Bootstrap, Semantic UIは既にコンポーネントが用意されているので!importantを使って上書きしようなんて判断はまだ早いです。次を御覧ください。
React RouterやUI ライブラリなど別コンポーネントにstyleを当てる。
23 <SubTitle as="h2">Finish...</SubTitle>
44 export const SubTitle = styled(Header)`
45 &&& {
46 color: palevioletred;
47 margin-bottom: 3rem;
48 }
49 `;
styled(NavLink)はHOCというものだな、なるほど。
！！？？ああ、トリッキーだ。&&& {}って何だ。
<a class="link colord">AAA</a>というアンカーがあったとすれば、
<a class="link colord myLink">AAA</a>として.myLinkでデザインしていくことになると思いますが、それと同じ振る舞いをします。
これはCSSの詳細度と闘っています。
それと忘れてはいけないのが、きちんとライブラリのドキュメント読んでprops渡し忘れないこと(as="h2")みたいに。
もしこのパターンでエラーが発生するときは、きっとライブラリのコンポーネントが期待しているものがstyledコンポーネントでは無く、ピュアなhtmlタグだったりする。
import {SuperHeader} from 'super-ui-sample';
import {
MyHeader
} from './cssinjs';
const Sample = () =>
<Body id="styledSample">
<div>
<MyHeader>My Title</MyHeader>
</div>
</Body>;
こういうこともある。
備考
- HOCについてはこちら
- CSSの詳細度についてはこちら