[React] makeStyles / createStyles の使い方

makeStyles,
createStyles
をimportし、useStylesを定義

import { makeStyles, createStyles } from '@material-ui/core/styles';   //style関連のimport



const useStyles = makeStyles((theme) => createStyles({  //useStylesを定義
    card: {
        margin: theme.spacing(5),
        padding: theme.spacing(3),
    },
}));

function Home() {

    const classes = useStyles();  //コンポーネント内でuseStylesを使用し、classesを定義

classesをreturnの中のjsxで使用する

    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <h1>タスク管理</h1>
                        <Card className={classes.card}>     //return内でstyleを呼び出す

以上、備忘録

ReactではComponentごとにstyleを定義するのが一般的かと思います。