Material-UIにスタイルを適用します.

弁解の中で最も愚かで最も意気地のない弁解は「時間がないから」-エジソン-

短い2021年の振り返り

ブログを書く前に、今の気持ちを話します.
私は2ヶ月前にBoot Campを前進して、今企業の協力に出てきました.ブットキャンプの時間帯でも感じましたが.本当にいたたまれなくて基本が足りなくてしかし、会社の要求もカバーしなければならないのでやったことのないTypeスクリプトとNextjsとMaterial-UIで作業していますが、容易ではないようです.私はほんの少ししか知らないが、学ばなければならないのは山のような状況だ......あきらめたいわけではありませんが、少し疲れたと思います.一つだけでもよく理解して論理を立てたい.あきらめないで、これから退勤して残りの时間はよく勉強します.
とりあえず始まる前に色々お話ししたいことがありますが、今日私が最近使っているMaterial-UIのstyleメソッドはstyled-componentと似ていますが、ちょっと違うのでブログに書いたほうがいいです.

に必要な機能を提供する材料UIコンポーネントをインポートします.

コンポーネントを挿入し、サポートされているAPIを介して必要な形で使用します.

1. [Hooks API] makeStyles

クラスオブジェクトを作成し、ReactのHookなどのクラスオブジェクトを使用するのに役立ちます.
makeStylesを使用してカスタムスタイルを適用する場合、cssプロパティを定義するオブジェクトには値があります.cssでhtmlタグにclassNameを与えるのと同じです.
カスタムスタイルを適用するには、makeStyles hookで作成した関数を呼び出す結果をclasses変数に格納します.次に、カスタムスタイルが必要な場所でclassName propの値を使用してclasses変数に格納されているクラス名を渡します.

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

const useStyles = makeStyles({
    home:{
        backgroundColor: "black",
        color: "white",
    }
})

export default function Home (){
    const classes = useStyles();
    return(
       <Box className={classes.home}>
           homepage 입니다.
       </Box>
    );
}

@material-ui/core/stylesでは、上記のコード

に示すようにmakeStyles hookで記述された関数の結果をconstusStyles変数として宣言し、

コンポーネントコンテンツでclassesという変数としてuserStyles()を使用します.すなわち,makeStylesの内容はcssの内容と同一であると考えられる.

次に、スタイルを適用するクラス名をオブジェクト{classs.home}として使用します.すなわち,cssを直接オブジェクトとして素子に与える.

コードに名前を付けることは重要です(コード会議に関連するものが大きい)ので、将来makeStylesを使用する場合は、上記のルールに従ってください.

主にこの方式を用いる.

2. [HOC API] withStyles

withStylesのHOC形式の造形も使えます.
この方法の使用はhookに比べて少ない.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const styles = {
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
};

function HigherOrderComponent(props) {
  const { classes } = props;
  return <Button className={classes.root}>Higher-order component</Button>;
}

HigherOrderComponent.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(HigherOrderComponent);

[Conditional Rendering] Props

parent componentからpropsを受信し、状態に応じて条件造形を行うこともできます.

const useStyles = makeStyles({
  // style rule
  foo: props => ({
    backgroundColor: props.backgroundColor,
  }),
  bar: {
    // CSS property
    color: props => props.color,
  },
});

function MyComponent() {
  // Simulated props for the purpose of the example
  const props = { backgroundColor: 'black', color: 'white' };
  // Pass the props as the first argument of useStyles()
  const classes = useStyles(props);

  return <div className={`${classes.foo} ${classes.bar}`} />
}

新しく返されたエレメントとパラメータとして受信されたエレメントの差は大きくありません.スタイルで定義されたスタイル情報を構成部品のpropsのクラスに適用します.classesとして持っている点だけが違います.props.classesのルートは、適用スタイルのクラス名を格納します.したがって、スタイルはButton構成部品に適用され、以下のようになります.