エンジニアを目指す日常ブログ

日々勉強したことのメモ。独学ですので間違っていたらコメント等で教えてください。

ReactでCSSを適用する方法のメモ

はじめに

今回の記事の目的

ReactでCSSを当てる方法はいくつかある。覚えておけばよさそうなものだけ抜粋してメモ。

  • classNameでクラスを設定
  • インラインスタイル
  • styled-componentsモジュールを利用
  • コンポーネントライブラリ(chakra-uiやmaterial-ui)を利用

classNameでクラスを設定

ソースコード

App.tsx

function App() {
    return (
        <>
            {/* 方法1:classNameでクラスを設定 */}             
            <div className="red-area">
                <h1>方法1</h1>
                <p>
                    classNameというpropsにクラス名を渡す。
                    index.tsxで呼び出しているindex.clasNameというpropsにクラス名を渡す。
                    index.cssに通常のCSSを記載する。
                </p>
            </div>
        </>
    );
}
export default App;

index.css

.red-area {
    background-color: red;
    color: white;
}

インラインスタイル

ソースコード

App.tsx

const style = { container: { backgroundColor: "red", color: "white" } };

function App() {
    return (
        <>
            {/* 方法2:インラインスタイル */}
            <div style={style.container}>
                <h1>方法2</h1>
                <p>
                    インラインスタイル:styleというpropsに、オブジェクトを渡す。
                    オブジェクトの型はReact.CSSProperties。
                    ここではstyleオブジェクトの中に、
                    要素ごとのReact.CSSPropertiesオブジェクトを設定している。
                </p>
            </div>
        </>
    );
}

export default App;

styled-components

インストール

$ yarn add styled-components
$ yarn add @types/styled-components

@types/styled-componentsはtypescriptの場合に必要。

ソースコード

styled.div``で囲んだ中にはCSSをそのまま書ける。:hoverなども書ける。

import styled from "styled-components";

function App() {
    return (
        <>
            {/* 方法3:styled-componentsモジュールを利用 */}
            <SContainer>
                <h1>方法3</h1>
                <p>
                    styled-componentsをインポートする。
                    関数の外で、例えばdivをベースに独自のスタイルをつけたコンポーネント
                    SContainerを用意する。
                </p>
            </SContainer>
        </>
    );
}

// SContainerの定義
const SContainer = styled.div`
    background-color: red;
    color: white;
`;
export default App;

div等HTMLのタグを装飾する場合は

const SContainer = styled.div`

とするが、自作のコンポーネントを装飾する際は

const SContainer2 = styled(SContainer)`

のように記載する。

コンポーネントライブラリ(chakra-uiやMUI)を利用

今回はchakra-uiを利用する。

chakra-ui.com

最も有名なのはMaterial UIらしい。 mui.com

インストール

$ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

ソースコード

import { ChakraProvider, Box, Text, Heading } from "@chakra-ui/react";

function App() {
    return (
        <>
            <ChakraProvider>
                <Box bg="red" color="white">
                    <Heading>方法4</Heading>
                    <Text>
                        コンポーネントライブラリのchakra-uiを利用。
                        divタグの代わりにBox、pタグの代わりにTextなど
                        便利に使えるコンポーネントがそろっている。
                    </Text>
                </Box>
            </ChakraProvider>
        </>
    );
}

export default App;

<ChakraProvider>タグで囲む必要があるが、親コンポーネントで囲んでおけば子コンポーネントでもchakra-uiが使える。

その他の方法

これ以外にも方法は様々あるらしい。

  • CSS Modulesを利用する方法。有名なモジュールであるnode-sassは非推奨になっている模様。
  • StyledJsxというモジュールを利用する方法。
  • emotionというモジュールを利用する方法。

表示内容

方法1~3の出力
方法1~3の出力

方法4の出力
方法4の出力

おわりに

方法3と4をうまく使えれば良さそう。

参考文献

zenn.dev

www.udemy.com