React.js 学習備忘録③~CSS~

ワクチンの副反応で投稿が遅くなってしまった...。

InlineStyle

・コンポーネント内に直接書き込む
・ハイフン繋がりのプロパティはキャメルケースになる

App.jsx

export const App = () => {
    const inlineStyle = {
        color : 'red',
        fontSize: '16px', //キャメルケースにするのでfont-sizeはfontSizeとなる
    }
    return(
        <>
            //オブジェクトを定義して、styleに渡す
            <p style={inlineStyle}>Inline Style</p>
            //直接記入も可能
            <p style={ //jsであることを示す{}
                    { //オブジェクトであることを示す{}
                        color: 'blue',
                        fontSize: 18, //pxであれば数値だけでもOK
                    }
            }>Inline Style</p>
        </>
    )
}

Css Modules

・コンポーネントに対応するcssを作成し、コンポーネント側で読み込んで使用する
・ファイル名はコンポーネント名.module.拡張子
・node-sassをインストールすることで、scss記法が可能

App.jsx

import cssModules from "./App.module.scss";

export const App = () => {
    return(
        <>
            <p className={title}>Css Modules</p>
        </>
    )
}

App.module.scss

.title{
    color: red;
    font-size: 16px;
}

Styled Jsx

・styled-jsxをインストールすることで使用可能
・styleタグで囲ってをcssを記入できる

App.jsx

export const App = () => {
    return(
        <>
            <p className={title}>Styled Jsx</p>
            //Jsxであることを明記する
            <style jsx="true">{`
                .title {
                    color : red;
                    font-size: 16px;
                }
            `}</style>
        </>
    )
}

Styled Component

・styled-componentsをインストールすることで使用可能
・スタイルを当てたコンポーネントを作成できる
・scss記法も可能
・作成したコンポーネントの継承もできる

App.jsx

import styled from "styled-components"

export const StyledComponents = () => {
    return (
        //styled-componentsで作成した要素で作成できる
        <StyledP>Styled Components</StyledP>
        <StyledKidP>継承したコンポーネント</StyledKidP>
    )
}
//styled.要素名でスタイルを当てたコンポーネントを作成できる
//styled-componentsで作成したコンポーネントであることがわかるようにプレフィックスなどを付けると良い
const StyledP = styled.p`
    color : red;
    font-size: 16px;
`
// styled(作成したコンポーネント)でコンポーネントを継承
const StyledKidP = styled(StyleP)`
    background-color: blue;
`

Emotion

・@emotion/reactと@emotion/styledをインストールすることで使用可能
・様々な書き方が可能

App.jsx

import { css } from "@emotion/react"
import styled from "@emotion/styled"

export const Emotion = () => {
    //cssを記入
    const emotionCss = css`
        color : red;
        font-size: 16px;
    `
    //cssのオブジェクトを作成
    const emotionCssObject = css({
        color : blue,
        fontSize: 16px
    })
    //コンポーネントを作成
    const EmotionComponent = styled.p`
        color : 'orange';
        font-size: '5px';
    `
    return (
        <>
            <p css="emotionCss">emotionCss</p>
            <p css="emotionCssObject">emotionCssObject</p>
            <EmotionComponent>emotionComponent</EmotionComponent>

        </>
    )
}

前回：再レンダリングについて
次回：React-Routerについて