年末にアップロードしようとしていた記事が、下書きに残っていたので投稿しちゃいます笑
- Componentごとにスコープを区切りたい
- どこでCSSが使われているのかわかりやすくしたい
- 通常のCSS通りの文法で記載したい など....
そんな時に、styled-componentsがいいとお聞きしたので試してみました。
この記事では、どんなことができるのか紹介していきたいと思います。
styled-componentsとは
styled-componentsはReactコンポーネントとスタイルをまとめて書くことを目的とした新たなライブラリーです。
CSS In JSと言われているやつですね。
styled-componentsの使い方
components/Hello.js
import React from 'react'
import styled from 'styled-components';
const Hello = styled.h1`
color: #F00;
`
export default function HelloComponent() {
return (
<div>
<Hello>Hello World</Hello>
</div>
);
}
Media Queries
utile/Helper.js
import { css, keyframes } from 'styled-components'
export const media = {
desktop: (...args) => css`
@media (min-width: 1025px) {
${ css(...args)}
}
`,
tablet: (...args) => css`
@media (max-width: 1024px) {
${ css(...args)}
}
`,
phone: (...args) => css`
@media (max-width: 568px) {
${ css(...args)}
}
`
}
components/Hello.js
import React from 'react'
import styled from 'styled-components';
const Hello = styled.h1`
${media.desktop`color: #F00;`}
${media.tablet`color: #0F0;`}
${media.phone`color: #00F;`}
`
export default function HelloComponent() {
return (
<div>
<Hello>Hello World</Hello>
</div>
);
}