【アウトプット㉞】-React- Material-UIのスタイルをカスタマイズする

ぽの

2020年7月18日 17:17

とらハックさんのYouTubeを参考にチャットボットアプリの作成を始めたので、こちらのアウトプットはそちら動画で学習した内容となります。

1.Hook API

Material-UIのサンプルコードと同じ

2.Style components API

コンポーネントのシンタックスに直接スタイルを適用
→コンポーネントとスタイルを紐づける

3.Hight-order component API

スタイルを当てたコンポーネントを返すコンポーネント

Hook APIの使い方

npmでパッケージをインストールしておく必要がある

インストール
npm install --save @material-ui/styles

import

import {createStyles, makeStyles} from "@material-ui/core/styles";"

関数を定義
const useStyles = makeStyles(() =>
    createStyles({
        "root": {
            padding: 0
         }   
    }),
);

記述ルール

1.json形式
2.キャメルケース
3.数値はそのまま
4.クォーテーションで文字を囲む

const useStyles = makeStyles(() =>
    createStyles({
       "button": {
           borderColor: '#FFB549',
           color: '#FFB549',
           fontWeight: 600,
           marginBottom: '8px',
           "&:hover": {
               backgroundColor: '#FFB549',
               color: '#fff'
           }
       }
    }) 
));

適用方法

1.コンポーネント内で宣言
2.オブジェクト型として使える

const Answer = (props) => {
    const classes = useStyles(); //コンポーネント内でuseStylesを実行する
    
    return (
        <Button className={classes.button}> //classesはオブジェクト型として使える
            {props.answer.content}
        </Button>    
    );
 };