web-dev-qa-db-ja.com

マテリアルUImakeStylesを使用するときに入力された小道具

Reactコンポーネントの一部をMaterialUIから新しいmakeStyles/useStylesフックAPIに移行しようとしています。正しく理解していれば、引き続き受け入れることができます。小道具をclassesに渡す限り、親コンポーネントからの小道具としてuseStyles：

const MyComponent = (props: Props) => {
  const { myProp } = props;
  const classes = useStyles(props);

その場合、Props型をどのように宣言するのか疑問に思いました。 HOCAPIと同等のものは次のとおりです。

const styles = createStyles({
  a: {},
  b: {}
});

interface Props extends WithStyles<typeof styles> {
  myProp: string;
}

これは機能しますが、少し冗長に見えるものです。

const styles = createStyles({
  a: {},
  b: {}
});

interface Props extends StyledComponentProps<ClassKeyOfStyles<typeof styles>> {
  myProp: string;
}

const useStyles = makeStyles(styles);

もっと良い方法はありますか？理想的には、createStylesを必要とせず、スタイル宣言とインラインでmakeStylesを使用します。

reactjstypescriptmaterial-uimaterial-ui-next
3
Such

コンパイル時にどのプロパティ/クラスが宣言されているかを知るために、私はそのような回避策を使用しました。

import React from 'react';
import { Theme, makeStyles } from '@material-ui/core';
import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';

interface StyleProps {
    root: BaseCSSProperties,
}

type PropsClasses = Record<keyof StyleProps, string>

let baseStyle: StyleProps = {
    root: {
        color: "red",
    },
};

const useStyles = makeStyles<Theme, StyleProps>(() => baseStyle as any);

const MyComponent = () => {
    const classes: PropsClasses = useStyles({} as StyleProps);
    return (<div className={classes.root}>This is root!</div>)
}

export default MyComponent;

ここで重要な瞬間classes定数の型を宣言することを忘れないでください。

このタイプを他のコンポーネントで再利用して、必要なすべての情報を入手できます。

1
ydanila