【3分でわかる！React×CSS】media queryをstyled-componentsで表現する

React×CSS

どうも、ちゃんなるです！

今回はStyled-Componentsを導入し、CSSをに置き換えます。また、レスポンシブ対応をする際に使うCSSのMedia QueryをStyled-Componentsで書いてみます。

導入

npm install styled-components

実現方法

今回置き換えるCSS

CSSクラスはfooterとcopyrightのふたつで、前者へメディアクエリが適用されています。

.footer {
  padding: 30px;
  background-color: #333;
}

.copyright {
  font-size: 10px;
  text-align: center;
  color: #797979;
}

@media screen and (max-width: 767px) {
  .footer {
    padding: 20px;
  }
}

CSSが適用されているHTML(JSX)要素

<footer className="footer">
  <div className="copyright">&copy;著者名</div>
</footer>

置き換えた後

わかりやすくするためにプレフィックスにStyledをつけました。

<StyledFooter className="footer">
  <StyledDiv className="copyright">&copy;著者名</StyledDiv>
</StyledFooter>

styled-componentsオブジェクトの宣言↓↓↓

import styled from 'styled-components'

const StyledFooter = styled.footer`
  padding: 30px;
  background-color: #333;
  @media screen and (max-width: 767px) {
    padding: 20px;
  }
`

const StyledDiv = styled.div`
  font-size: 10px;
  text-align: center;
  color: #797979;
`

メディアクエリは通常のクエリとまとめて書くことができるようです。

関連資料

• styled-components.com