reactのデザインをmaterial-ui + styled components (CSS in JS)を組み合わせて利用する

2021年1月17日React

react のデザインで styled components (CSS in JS)で行う場合、「全てのスタイルを１から作成するのは嫌だ」というときに、material-uiと組み合わせて利用することで省エネでデザインすることができます。

　

material-ui + styled components は公式ページでも紹介されている方法

material-uiの公式ページでは、styled components以外に以下のカスタマイズ方法が可能です。

• Plain CSS
• Global CSS
• Styled Components
• CSS Modules
• Emotion
• React JSS

今回は、この中からstyled componentsを利用したカスタマイズ方法を試してみます。

通常のタグを styled componentsを利用したカスタマイズした場合

divタグをカスタマズした場合の例です。

import styled from "styled-components";

const Container = styled.div`
  background-color: #000;
  color: #0cf;
`;

export default function StyledComponents() {
  return (
    <Container>divをカスタマイズ</Container>
  );
}

material-uiのButtonオブジェクトをstyled componentsでカスタマイズした場合

　

• 左：material-ui標準のボタン
• 右：styled componentsでカスタマイズしたボタン

　

import React from "react";
import styled from "styled-components";
import Button from "@material-ui/core/Button";

const StyledButton = styled(Button)`
  background-color: #000;
  color: #0cf;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 7px 14px;
  border-radius: 50%;
  &:hover {
    background-color: #0cf;
    color: #000;
  }
`;

export default function StyledComponents() {
  return (
    <div>
      <Button>Default</Button>
      <StyledButton>Customized</StyledButton>
    </div>
  );
}

まとめ

styled components に興味はあるけど、ガッツリと１から作成は。。。という方は一度お試しください。