タイプストーリーが短いと、typescriptはすべてのマテリアルUIコンポーネントに欠けているproperty classesを不平にします。つまり、Typescriptは、classesプロパティがほとんどすべてのマテリアル - uiコンポーネントに存在するように強制します。ここでts-loaderを使用してコンパイルWebPACKの中のエラーメッセージ、私は以下のコードを持っているTypescript Material UIプロパティ 'classes'がMUIコンポーネントのタイプにありません
、
はHeader.tsx
import AppBar from 'material-ui/AppBar';
import * as React from 'react';
import { withStyles } from 'material-ui/styles/index';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
const decorate = withStyles((theme) => ({
header: {
paddingTop: theme.spacing.unit,
width: '100%',
},
}));
const AppBarTypographyStyle = {
color: 'white',
fontSize: '1.6rem',
};
const Header = decorate(({classes}) => (
<header>
<AppBar position="static" classes={{root: classes.header}}>
<Toolbar>
<Typography style={AppBarTypographyStyle} classes={{}} color="inherit" type="title">
OLIVE
</Typography>
</Toolbar>
</AppBar>
</header>
));
export default Header;
であり、私は次のメッセージ
TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & ToolbarProps & { children?: ReactNode; }'.
Type '{ children: Element; }' is not assignable to type 'ToolbarProps'.
Property 'classes' is missing in type '{ children: Element; }'
Toolbarのエラーを持っています
AppBarとTypographyについてはfunction decoratorに定義されたスタイルと空のオブジェクトを追加してclasses propertyを追加しました。しかし、それは私が材料-UIドキュメントから
https://material-ui-next.com/customization/css-in-js/
オーバーオーバーライドJS &、IN
CSSを
withStyleデコレータを使ってスタイリングアプローチを以下のJUST使用することをstyle & className properties<AppBar position="static" style={exampleStyleObj} className={exampleClass} >ことはできません
https://material-ui-next.com/customization/overrides/活字体材料-UIが同じ存在する場合、私がチェックした [email protected] [email protected]
私が使用していますが、ガイド問題や、他の場所で答えても、材料-UIのソースコードをチェックし、次を発見した
/**
* All standard components exposed by `material-ui` are `StyledComponents` with
* certain `classes`, on which one can also set a top-level `className` and inline
* `style`.
*/
export type StandardProps<C, ClassKey extends string, Removals extends keyof C = never> =
& Omit<C & { classes: any }, 'classes' | Removals>
& StyledComponentProps<ClassKey>
& {
className?: string;
style?: Partial<React.CSSProperties>;
}
StandardPropsは、ほとんどのComponentProps interfaceから拡張されたものです（たとえば、AppBarProps）。しかし、これまで私はこれらを解決するために多くの運がなかった。
助けてください！
Typescriptを使用しているので、このhttps://www.npmjs.com/package/@types/material-uiを使用していますか？ – Dane
こんにちは、おかげで助けてくれてありがとう！残念ながら、@ types/material-uiタイプの定義はmaterial-ui v0.18.17用です。 V1ベータ版ではありません。 V1ベータ版では、material-ui @ nextのプロジェクト自体に型定義が追加されているため、追加の@typeをインストールする必要はありません。 しかし、私は私が見つけたものに基づいて私の質問を編集した、見てみましょう！ –
@ Ioalaあなたの例は、 'typescript @ 2.4.2'と' material-ui @ 1.0.0-beta.21'でうまく動作しているようです。何よりも、Material UIコンポーネントに空の 'class'の小道具を提供すると言っても過言ではありません。旧バージョンの入力ではそうですが、それ以上はありません。あなたは最新バージョンを使用していますか？ –