コンポーネントクラスを飾るとき@cfilipovあなたが使用する必要がありますStyledComponentPropsの代わりにWithStyles 、および厳格な型チェックモードでは、null以外のアサーション演算子を使用する必要がある場合は!エキスにclassesのフィールド。 これは、クラスデコレータとしてwithStylesを使用できるようにするための妥協案です。 TypeScriptのクラスデコレータには、戻り型が引数型と一致する必要がある

1. withStylesをクラスデコレータとして使用することはサポートされていません
2. 装飾されたコンポーネントタイプの要素を構築するときに、ダミーのclasses小道具を渡す必要があります（以前の妥協案で、おそらくもっと面倒でした）
3. classesがコンポーネント内でヌル可能であると見なされることを要求し、そのフィールドにアクセスするときに!演算子を使用することを強制します（現在の妥協点）

コンポーネントに状態がない場合は、ステートレス機能コンポーネントを使用することを強くお勧めします。これにより、必要な型注釈が少なくなり、型の安全性が高まります。

export default withStyles(styles)<Props>(({ classes, message }) => (
  <div className={classes.main}>
    <div className={classes.foo}>
      Hello World! {message}
    </div>
  </div>
));

ここでPartial <>の使用について言及し

そのコメントに対する私のフォローアップを読むと、 Partial<>は必要ないことがわかります。

そのコメントに対する私のフォローアップを読むと、Partial <>は必要ないことがわかります。

Partial<>に関するあなたのコメントを見ました。 StyledComponentPropsを使用することは、基本的に同じことです（その定義では、 Partial<>しています）。 私の不満は、クラス名に!でアクセスする必要があるということです（あなたが言ったように）。 ダミーのclasses小道具を渡すこと、または!の使用を要求することは、どちらも妥協点ではないと思います。

明確にするために、私がここで抱えている根本的な問題は、typescriptの実験的機能の制限を回避するために、その場限りの回帰を導入するという選択だと思います。 私はデコレータを気にしないので、ある程度の偏見を認めますが、他の人は明らかに気にしますが、ここでのトレードオフは私には意味がありません。

@cfilipov withStylesタイピングの最初のリファクタリングは、オプション（1）を選択することでした。つまり、クラスデコレータとしてwithStylesを使用する代わりに、クラスコンポーネントと関数コンポーネントの両方に対してタイピングを完全に正しくすることでした。 。 その後、デコレータ構文の使用が一般的なリクエストであるというフィードバックを受け取ったので、オプション（3）に切り替えました。 私はその決定を再検討できてうれしいです。 私も、現在の半機能状態でデコレータをサポートするよりも型安全性を好みます。

ええ、私はこのような人気のあるリクエストをサポートしたいという願望を理解しています。 私もデコレータを使いたいのですが、（mui以外で）毎回デコレータに多くの問題が発生するので、個人的には準備ができるまでデコレータを使わないことにしました。

あなたが私の懸念を共有しているように思えますが、追加することはあまりないので、他の人がこの方向にフィードバックを提供して影響を与えることができれば幸いです。

beta.10からbeta.13に切り替えて、何かが変更されたかどうかを確認しました。はい、これは実際の問題です。 私の2セントをここに投入するために、私にとって、デコレータは実験的なものです。 それらは明らかに将来変更される可能性があります。 それまでは、100％正確な方法を完全にサポートしていました。 物事を機能させるためにタイプをハッキングすることに対して、一貫したタイプの安全性が必要です。

8550は、人々がこれに混乱しているというさらなる証拠のように見えます。（TypeScriptで）デコレータとして@withStyles()をサポートしないことを検討する必要があります。

これは、入力を正しくした場合にクラスを「装飾」するように見えるものです。

type NonStyleProps = {
  text: string
};

const styles = {
  root: {
    backgroundColor: 'red'
  }
};

const DecoratedComponent = withStyles(styles)(
  class extends React.Component<NonStyleProps & WithStyles<'root'>> {
    render() {
      return (
        <div className={this.props.classes.root}>
          {this.props.text}
        </div>
      );
    }
  }
);

@pelotomこの問題のため、beta.10からまだ前進していません。 以前、Reduxのconnectメソッドを使用したクラスのスタイルについてコメントしました。 比較的簡単で頑丈だと思います。 ＃8059の3番目のコメントは、タイプに関する私自身です。

@pelotomこの問題について教えてくれてありがとう。 私はTSデコレータの大規模なユーザーですが、その場合、型の安全性を高めるために、 withStylesがデコレーションサポートを廃止することを嬉しく思います。

@withStyles（）をデコレータとしてサポートしないことを検討する必要があります（TypeScriptで）。

@pelotom私は個人的にこの変更に賛成です。 @sebaldここで何をしたいですか？

これは単純な変更です。 私は先に進んで、あなたがそれと一緒に行きたい場合に備えてPRを開きました🙂

@pelotomこのように使用した場合でも、タイピングは機能しますか？

interface IStyles {
    // styles interface
}
interface IHeaderInfoStyles {
    classes: any;
}
interface IHeaderInfoProps {
    // properties resulting from dispatches
}
interface IHeaderInfoInjectedProps {
   // props injected from parent if any
}
interface IHeaderInfoDispatchProps {
    // dispatches
}
interface IHeaderInfoState {
    // your state for the class
}

type HeaderInfoProps = IHeaderInfoProps & IHeaderInfoInjectedProps & IHeaderInfoDispatchProps & IHeaderInfoStyles;

class HeaderInfo extends Component<HeaderInfoProps, IHeaderInfoState> {

export const HeaderInfo_container = withStyles<IHeaderInfoInjectedProps, IStyles>(styles)(
    connect<IHeaderInfoProps, IHeaderInfoDispatchProps, (IHeaderInfoInjectedProps & IHeaderInfoStyles)>(mapStateToProps, mapDispatchToProps)(HeaderInfo),
);

@marcusjwhelan withStylesは2つの型パラメーターを受け取らなくなり、スタイルの型パラメーターを指定する必要がなくなりました（ stylesから推測できます）。 代わりに書くことができるはずです

withStyles(styles)<NonStyleProps>(...);

mapStateToPropsとmapDispatchToPropsのタイプを指定すると、これがあなたの例でどのように見えるかを示すことができるかもしれません。

tl; dr; 変更を加えて、バックラッシュが何であるかを見てみましょう、私は推測します👷🏻

@oliviertassinari @ pelotom¯_（ツ）_ /¯私はデコレータを使用していません。個人的には、影響を受けないため、この変更については気にしません。 しかし、多くの人がこの「機能」を気にかけているようです。 そもそもそれを追加したのはそのためです。 ここで優先されるのは私見です。

withStylesの変更には非常に満足していますが、 ramdaやrecomposeなどの他のより機能的なライブラリを見ると、入力はそれほど厳密ではありません。どちらも超タイプセーフではありません。 多くの場合、関数の戻り値を表すジェネリックを渡す必要があります。 きれいではありませんが、ユーザーの99.9％で機能します。

デコレータを使用している人々のために機能していた古いタイピングを復活させることができないのはなぜですか？ 2つのジェネリックがあったため、両方の型を並べて使用できる可能性があります。

また、デコレータに関する人々の問題が何であるかについて少し混乱しています（「機能しない」に関して）。 結局、Angularやhttps://nestjs.com/のようなライブラリはそれらを多用します。 私たちの場合、人々は小道具にWithStylesを追加するだけで、問題ありません。

@sebald

デコレータを使用している人々のために機能していた古いタイピングを復活させることができないのはなぜですか？ 2つのジェネリックがあったため、両方の型を並べて使用できる可能性があります。

どういう意味かわかりません。 人々がデコレータを苦痛なく使用できるようなタイピングはありませんでした。 最初の実装は＃8267に悩まされていました。これは、ダミーのclasses小道具（例： <StyledComp classes={{} as any} />を渡さないと、装飾されたコンポーネントの要素を作成できないということclassesはコンポーネントクラス内で潜在的にundefinedと見なされます。 TypeScriptデコレータを現在の形式で使用する場合は、これらが2つのオプションのみです。 あなたの毒を選んでください。

3番目の方法は、正しい型を使用することです。これにより、 classesはクラス内で定義されますが、小道具として渡す必要はありません。 これらの両方の条件を設定するには、デコレータをあきらめる必要があります。

@pelotomはい、ごめんなさい。 あなたが正しい。 本当に私の日ではありません...🤐だからマージしましょう！

@sebald

また、デコレータに関する人々の問題が何であるかについて少し混乱しています（「機能しない」に関して）。 結局、Angularやhttps://nestjs.com/のようなライブラリはそれらを多用します。

Angularでどのように使用されているかはわかりませんが、デコレータを簡単に使用できるユースケースは確かにあります。 基本的に、デコレータがデコレーションするクラスのタイプを変更する必要がない場合は、正常に機能します。 それは私たちがここにいる状況ではありません。 withStylesは、装飾するコンポーネントのタイプを変更する必要があります。

@pelotomはい、その通りです。 悪いのは突然変異だけです。 実際、TSが現在デコレータを実装する方法はAngularユーザーにとっても良いかもしれません。なぜなら、デコレータAFAIKは、「このクラスをコンポーネントとして登録する」や「メタデータを追加してDIで使用できるようにする」などの契約をフレームワークと設定するからです。 「...神はこれについて書いていても私を感じさせます🤢

@pelotom私が自分のやり方で型を持っている理由は、それが私のコンポーネントに型安全性を提供したからです。 現在、コンポーネントに関しては、タイプにはタイプの安全性がありません。 私の例のinjectedPropsは、コンポーネントが機能するために必要なタイプです。 以下からの接続のためのタイプreact-redux mapDispatchToPropsから来mapStateToPropsとDispatchPropsから来るの小道具のものである必要があります。

非常に私の親コンポーネントが、私はそれらを注入するか、私のプロジェクトはコンパイルされません必要があることを知っているようにinjectedPropsがあることが必要で終わり。 （これが私が欲しいものです）。 この変更は、この種のtypeSafetyに移行しますか？

@marcusjwhelan 、ベータ10でコンパイルされた完全な（ただし最小限の）例を提供できれば、移行方法を紹介できます。 新しいバージョンは、以前よりも表現力があり、タイプセーフである必要があります。

@pelotom愚かな質問ですが、新しいリリースが完了したら通知を受け取る方法はありますか？

@wcandillonTwitterでフォローしてください。

@pelotom上記の例を投稿しました...なぜそれ以上のものを見る必要があるのですか？ プロパティはa、b、c、d、eであると想定できます。 唯一のことは、注入された小道具が要件として放出される必要があるということです。

編集

私はそれを考え出した。

私は少し遅れてこの議論に耳を傾けていますが、ここで述べたのと同様のエラーが発生しており、それを修正する方法をまだ決定していません。 [email protected]と[email protected]ます。

const LoginForm = withStyles(styles)(
    class extends React.Component<WithStyles<'root' | 'button'>, ILoginFormState> {
    // ...
    }
);

render(
  <MuiThemeProvider theme={theme}>
    <LoginForm />
  </MuiThemeProvider>,
  document.getElementById('login-form')
);

この特定の場合に表示されるエラーメッセージは次のとおりです。

Type '{}' is not assignable to type 'IntrinsicAttributes & WithStyles<"root" | "button"> & StyledComponentP...'.
  Type '{}' is not assignable to type 'WithStyles<"root" | "button" | "progress" | "textField">'.
    Property 'classes' is missing in type '{}'.
 not assignable to type 'WithStyles<"root" | "button" | "progress" | "textField">'.
    Property 'classes' is missing in type '{}'.

コンポーネントクラスを装飾するときは、WithStylesの代わりにStyledComponentPropsを使用する必要があります

@ pelotom-この例はどこかにありますか？ TypeScriptでステートフルコンポーネントクラスのスタイルを設定する方法を決定するのに多くの問題があります。

@iamjemそれはあなたが提供していないので、言うには少し難しいstyles 、しかし、最初の問題は、あなたがより多くのクラスキーを言及していることがあるように見えるstylesあなたが言及しているよりも、 WithStyles<...> 。 に変更すると思います

const LoginForm = withStyles(styles)(
    class extends React.Component<WithStyles<keyof typeof styles>, ILoginFormState> {
    // ...
    }
);

それは最初の問題の世話をする必要があります。 次に、2番目の問題があるように見えます。それは、結果のタイプLoginFormが

React.ComponentType<WithStyles<"root" | "button"> & StyledComponentProps<"root" | "button">>

これは明らかに正しくありません。 スタイル以外の小道具がないため、型システムが混乱しているようです。 タイプ引数として{}を渡すことにより、スタイル以外の小道具が何であるかを明示することで、それを助けることができます。

const LoginForm = withStyles(styles)<{}>( // <-- note the type argument
    class extends React.Component<WithStyles<keyof typeof styles>, ILoginFormState> {
    // ...
    }
);

申し訳ありませんが、それはとても複雑です、私はこのようなものを機能させるためのより簡単な方法を知っていたらいいのにと思います！

それがトリックでした！ @pelotomのクイックヘルプをありがとうございます。 私は長い間Reactを使用してきましたが、最近Material-uiに飛び込んで、Typescriptを試してみようと思いました。 言うまでもなく、Typescriptを幸せにする方法を伝えるのが難しいいくつかのエッジケースがあることに気づいています。

recomposeを使用して解決しました

例

import { StyleRules, Theme, withStyles } from "material-ui/styles";
import * as React from "react";
import { compose } from "recompose";

interface IProps {
    classes?: any; // <-- add question mark
    text: string;
}

const styles = (theme: Theme): StyleRules => ({
    root: {

    },
});

@compose(
    withStyles(styles),
)
export class MyComponent extends React.Component<IProps> {
    render() {
        const { classes, text } = this.props;
        return (
            <div className={classes.root}>
                {text}
            </div>
        );
    }
}

私はこの問題（および＃8704）と戦っていましたが、過去数日間で明確な結果はありませんでした。 それから私は@pelotomからアドバイスを受け

StyledComponentProps代わりにWithStyles StyledComponentPropsを使用する必要があります

これを解決するための同様の方法をGitHubで検索しました。 そして、私は1つの作業例を😂ました。 それは良いものですが、それは私の問題を解決しました-TypeScriptが幸せなクッキーである別個のコンテナとコンポーネント：ここで言及された例（注：私の場合、コンポーネントのマッピングは別個のコンテナファイルにありますが、アイデアは同じ。）。

誰かがこれが悪い解決策だと思うなら、私はどんな変更やアイデアにもオープンです。 今、コードが文句を言うのをやめてよかったです。

type Styles = 'foo';
const styles: StyleRulesCallback<Styles> = (theme: Theme) => ({
    foo: {
        position: 'relative',
    }
});

interface Props {
  something: string;
}

class Sidebar extends React.Component<Props & WithStyles<Styles>> {
    render() {
        const { classes, something } = this.props;

        return (
                    <div className={classes.foo}>{something}</div>
        );
    }
}

export default withStyles(styles)<Props>(Sidebar);

新しい問題を作成したくありませんが、ドキュメント、例で見たものをすべて試し、再構成しても問題を渡しましたが、いくつかのプロパティをコンポーネントに追加すると、コンポーネントを機能させることができません。
そして、私が見つけたリソースは、ほとんどが古いバージョンのTS、MUI、さらにはReactのものです。

これが私のコンポーネントです：

import React from 'react';
import AppBar from 'material-ui/AppBar';
import { withStyles, WithStyles, StyleRulesCallback } from 'material-ui/styles';

const styles: StyleRulesCallback<'positionFixed'> = () => ({
  positionFixed: {
    top: 'auto',
    bottom: 0,
  },
});

const decorate = withStyles(styles);

interface Props {
   someProp: string;
};

export const BottomNav = decorate<Props>(
  class extends React.Component<Props & WithStyles<'positionFixed'>, {}> {
    render() {
      return (
        <AppBar />
      );
    }
  }
);

export default BottomNav;

そして、エラーは次のとおりです。

TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & Props & StyledComponentProps<"positionFixed"> & { children?: ReactNode; }'.
  Type '{}' is not assignable to type 'Props'.
    Property 'someProp' is missing in type '{}'.

私はTSの初心者ですが、ドキュメントページがあり、例が非常にわかりにくいか、完全ではありません。

何かアイデアがあれば、ありがとうございます;-)

@otroboe実際にエラーのフラグが立てられたコードを

<BottomNav />

もしそうなら、問題はあなたがsomeProp小道具を提供する必要があるということです（これはあなたのProps定義に従って必要です）：

<BottomNav someProp="foo" />

恥ずかしい…ああ、恥ずかしい。
私はTS統合に非常に集中していたので、周りを見回して少し前に戻るのを忘れていました。

どうもありがとう

@otroboe文字列の重複も削除します...

type Styles = 'positionFixed';

でももっと簡単だったらいいのに...

はい、私もそうしました、ありがとう：+1：

これと同じ問題に直面しましたが、クラスまたは関数と同じファイルでスタイルオブジェクトを初期化した場合にのみ発生することがわかりました。 または、別のファイルからスタイルをインポートしている場合、このエラーは発生しません。

なぜこれが起こるのか手がかりはありますか？

@ nishmeht7自己完結型のスニペットを投稿できますか？

@pelotom作成に

私はからの基本的なフォームの例に続いhttps://material-ui.com/demos/selects/をそれ苦情だtheme持っていませんroot （最新typescriptですとを使用して材料- ui）、 form要素にクラスが適用されていませんformクラス名がありませんconsole.log(theme)が要素を検査しているので、すべて問題ないので、クラスは正しく生成されていたようです。 withStylesを介してに渡されませんform要素ですが。かなり紛らわしいです。

だから私はこれがソートされるまで今のところスタイルに戻ってきました：

<form style = {{display:'flex',flexWrap:'wrap'}} autoComplete="off">

@HenrikBechmann typescriptのスタイルドキュメントに従ってみましたか？ 過去には、それは私にとって非常に役に立ちました。 https://material-ui.com/guides/typescript/

ありがとう@lookfirst！ 私は（最初ではありませんが:-)）そのドキュメントを見て、使用しました

export default withStyles({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
})(BaseForm)

（関数ではなくオブジェクトを渡す）

...これにより、typescriptエラーが回避され、生成されたクラスの挿入が可能になりました。

うまくいけば、そこにある他のヒントがより複雑な構成に役立つでしょう。

また、 styles関数のより複雑な構造が機能することを確認しました（生成されたclassNameをform挿入します）。

import React from 'react'

import { withStyles, createStyles, Theme } from '@material-ui/core/styles'

/*
    patterned after first demo https://material-ui.com/demos/selects/ for 3.03
    use Typsecript fixes from here: https://material-ui.com/guides/typescript/
*/

const styles = (theme:Theme) => createStyles({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
})

class BaseForm extends React.Component<any,any> {

    render() {
        const { classes } = this.props

        return (
            <form className = {classes.root} autoComplete="off">
                {this.props.children}
            </form>
        )
    }
}

export default withStyles(styles)(BaseForm)

編集： @ eps1lonは、 WithStyles使用する場合、これは不要であると指摘しています。

ReturnType<T>を使用してClassKeyを生成することに成功しました：

import * as React from 'react';

import withStyles, {
  StyledComponentProps, 
  StyleRulesCallback,
} from '@material-ui/core/styles/withStyles';

import { Theme } from '@material-ui/core/styles/createMuiTheme';

const overrideStyles = (theme: Theme) => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
  },
});

type Props = StyledComponentProps<keyof ReturnType<typeof overrideStyles>>;

class MyComponent extends React.PureComponent<Props> {
  render() {
    return <div className={this.props.classes.root}></div>;
  }
}

export default withStyles(overrideStyles as StyleRulesCallback, {withTheme: true})(MyComponent);

keyof ReturnType<typeof styleOverrides>をStyledComponentProps ClassKeyすると、 overrideStylesによって返されるオブジェクトからキーを取得し、それらのキーのリストを手動で保持する必要がなくなります。 。 私が気付いた唯一の不具合は、 withStyles呼び出しでoverrideStyles as StyleRulesCallbackをキャストしない場合のタイプエラーです。 理由は100％わかりません。 なんらかの理由でoverrideStylesが何であるかを理解していないのはwithStylesだと思います。

そのかなり手の込んだタイプを明確にするために、 typeof styleOverridesはスタイルオブジェクトを返す関数に解決されます。 ReturnType<T>は、スタイルオブジェクト自体を取得します。 keyofは、スタイルオブジェクトからキーを取得します。

@chrislambeタイプスクリプトガイドをチェックアウトする必要がありReturnTypeなどを使用する必要はありません。ヘルパーとしてはcreateStylesとWithStylesで十分です。

@ eps1lonああ、とてもかっこいい！ ありがとう！

fwiw createStyles / withStylesのペアは、使用するにつれてますます気に入っています。 きちんとしたコードを促進し、すべてのスタイリング/タイプスクリプトの問題を処理します。ローカルの条件付きcssが必要な場合は、ローカルのスタイル属性を作成するだけです。もちろん、これはクラスよりも優先されます。

良い！！

@ material-ui / core @ 従うと、 Test does not have required attribute classesれます。

import React from 'react'
import { Theme, WithStyles, withStyles, createStyles } from '@material-ui/core/styles'

const styles = (theme: Theme) => createStyles({
  root: {
    color: theme.palette.action.active
  },
})

interface Props extends WithStyles<typeof styles> {
  asd: boolean
}

class TestComponent extends React.Component<Props> {

  render() {
    const { classes } = this.props

    return (
      <div className={classes.root}>
      </div>
    )
  }
}

const Test = withStyles(styles)(TestComponent)

const a = () => <Test asd={true}/>

@ aaronlifton2
WithStylesを使用して小道具を拡張するに従ってください

@valoricDeあなたはあなたの問題を解決しましたか？

@TrejGunチェックしたところです。 機能コンポーネントと@ material-ui / [email protected]を使用すると、この問題は発生しません

よくわかりません。
こちらのドキュメントに従ってください： https ：//material-ui.com/guides/typescript/#augmenting -your-props-using-withstyles
この元の問題の問題を引き起こすだけのようです。 コンポーネントをどこかで使用すると、typescriptは、withStylesによって_injected_されることに気付くのではなく、クラスプロパティを小道具として_pass_するように要求します。

私はこれらの問題を数時間読んでいますが、実際には理解していません。 この時点でどんな助けでもとてもいいでしょう。

上記のこの提案について

コンポーネントクラスを飾るとき@cfilipovあなたが使用する必要がありますStyledComponentPropsの代わりにWithStyles 、および厳格な型チェックモードでは、null以外のアサーション演算子を使用する必要がある場合は!エキスにclassesのフィールド。 これは、クラスデコレータとしてwithStylesを使用できるようにするための妥協案です。 TypeScriptのクラスデコレータには、戻り型が引数型と一致する必要がある

1. withStylesをクラスデコレータとして使用することはサポートされていません
2. 装飾されたコンポーネントタイプの要素を構築するときに、ダミーのclasses小道具を渡す必要があります（以前の妥協案で、おそらくもっと面倒でした）
3. classesがコンポーネント内でヌル可能であると見なされることを要求し、そのフィールドにアクセスするときに!演算子を使用することを強制します（現在の妥協点）

コンポーネントに状態がない場合は、ステートレス機能コンポーネントを使用することを強くお勧めします。これにより、必要な型注釈が少なくなり、型の安全性が高まります。

export default withStyles(styles)<Props>(({ classes, message }) => (
  <div className={classes.main}>
    <div className={classes.foo}>
      Hello World! {message}
    </div>
  </div>
));

StyledComponentProps使い方を知るにはどうすればよいですか？ stylesオブジェクトで定義されたキーの文字列を渡すだけのようです。

しかし、ドキュメントは、単に機能しない何かをするように私たちに教えていますか？ 私は何が欠けていますか？ https：//material-ui.com/guides/typescript/#augmenting -your-props-using-withstyles ...を使用したいと思います。

これは可能ですか？

@valoricDe 、その問題がなかった機能コンポーネントをどのように実行しましたか

@TrejGunチェックしたところです。 機能コンポーネントと@ material-ui / [email protected]を使用すると、この問題は発生しません

私はこのようなことを試みています：

`` `import React、{ChangeEvent、Component、Dispatch} from" react ";
「prop-types」からPropTypesをインポートします。
import {connect} from "react-redux";
import {Grid、FormControlLabel、Theme、createStyles、withStyles、Radio、WithStyles} from "@ material-ui / core";
「./Amount」から金額をインポートします。
import {onPastDueFormFieldChange} from "../../store/actions/selectPaymentAmountActions";

const styles =（テーマ：テーマ）=>
createStyles（{
額： {
alignSelf： "center"、
}、
}）;

インターフェイスOwnPropsはWithStylesを拡張します{}

インターフェイスStateProps {
pastDue ?:番号;
pastDueOrTotalOrOther：文字列;
}

インターフェイスDispatchProps {
onPastDueFormFieldChange：OnPastDueFormFieldChange;
}

タイプProps = StateProps＆DispatchProps＆OwnProps;

const PastDueFormField = withStyles（styles）（
（{classes、pastDue、pastDueOrTotalOrOther、onPastDueFormFieldChange}：小道具）=>（
value = "pastDue"
チェック済み= {pastDueOrTotalOrOther === "pastDue"}
onChange = {onPastDueFormFieldChange}
label = "延滞："
control = { }
/>




）、
）;

const mapStateToProps =（状態：RootState）：StateProps =>（{
pastDue：state.customerData.balanceDue.pastDue、
pastDueOrTotalOrOther：state.customerPaymentsForm.pastDueTotalOrOther、
}）;

デフォルトの接続をエクスポート（（
mapStateToProps、
{onPastDueFormFieldChange}、
）（PastDueFormField）;

When I use this component I have this error:
```import PastDueFormField
Property 'classes' is missing in type '{}' but required in type 'Readonly<PropsWithChildren<Pick<Pick<Props, "pastDue" | "pastDueOrTotalOrOther" | "onPastDueFormFieldChange"> & StyledComponentProps<"amount">, "classes" | "innerRef"> & OwnProps>>'

@yehudamakarov最初にreact-reduxなしでコーディングし、すべてが期待どおりに機能するときにconnectを追加してみてください。 どの小道具が注入されるかについて、良い概観を得るのは信じられないほど難しいです。

これらの問題に遭遇したとき、私は

1. 最初にコンポーネントの小道具を入力します
2. すべてが期待どおりに必要かどうかを確認します。つまり、 missing props取得します。
3. その場で適用する
4. typescriptが注入されたすべての小道具を認識したかどうかを確認します
5. すべてのホックが適用されるまで3を繰り返します。

よりクリーンなコードを促進します。 特に操作の順序に関して。 現在、関心の分離なしにwithStylesとconnectを混合しています。

セバスチャン、どうもありがとう。
接続するためにジェネリック引数を渡さないことで問題を解決しました。 <StateProps ...>チャンクを取り出しました。

これらの一般的な引数は、WithStyles <>を拡張するOwnPropsインターフェイスをいじっていたと思います。

とにかくすべてをコンポーネントに渡すので、小道具から取得したタイプチェックで十分です。 idにconnect <>ジェネリックが必要な理由がわかりません。

ありがとう！

これは、入力を正しくした場合にクラスを「装飾」するように見えるものです。

type NonStyleProps = {
  text: string
};

const styles = {
  root: {
    backgroundColor: 'red'
  }
};

const DecoratedComponent = withStyles(styles)(
  class extends React.Component<NonStyleProps & WithStyles<'root'>> {
    render() {
      return (
        <div className={this.props.classes.root}>
          {this.props.text}
        </div>
      );
    }
  }
);

そして、次のようにテーマ（useTheme（））を追加する方法：

const decorate = withStyles((theme: Theme) => ({
  root: {
    display: "flex"
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(["width", "margin"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    })
  }
})