Reactjs 在新的@material ui/core中使用带有Typescript的withStyles

我正在尝试更新我的一些旧打字稿，它使用了一些材料-ui@next到新的@material ui/core

Typescript Version: 2.8.3
@material-ui/core: 1.1.0

我已经实现了一个非常简单的组件，它只需要一个道具，但是typescript编译器在使用它时会抛出以下错误

src/App.tsx(21,26): error TS2322: Type '{ classes: true; imageUrl: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Placeholder> & Readonly<{ children?: ReactNode; }>...'.
  Type '{ classes: true; imageUrl: string; }' is not assignable to type 'Readonly<PROPS_WITH_STYLES>'.
    Types of property 'classes' are incompatible.
      Type 'true' is not assignable to type 'Record<"root", string>'.

src/App.tsx（21,26）：错误TS2322:类型“{classes:true；imageUrl:string；}”不可分配给类型“IntrinsicAttributes&IntrinsicClassAttributes&Readonly…”。
类型“{classes:true；imageUrl:string；}”不可分配给类型“Readonly”。
属性“类”的类型不兼容。
类型“true”不可分配给类型“Record”。

这是组件占位符.tsx

import * as React from "react";
import { StyleRulesCallback, WithStyles, withStyles, StyledComponentProps } from "@material-ui/core";

export interface IPlaceholderProps {
    imageUrl: string;
}

export const STYLES: StyleRulesCallback<"root"> = theme => ({
    root: {
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
    }
});

export type PROPS_WITH_STYLES = IPlaceholderProps & WithStyles<"root">;

export class Placeholder extends React.Component<PROPS_WITH_STYLES, {}> {
    render(){
        return <div className={this.props.classes.root}>
            <img src={this.props.imageUrl}/>
        </div>;
    }
}

export default withStyles(STYLES, { withTheme: true })<PROPS_WITH_STYLES>(Placeholder);

import*as React from“React”；
从“@material ui/core”导入{StyleRulesCallback，with styles，with styles，StyledComponentProps}；
导出接口IPlaceholderProps{
imageUrl：字符串；
}
导出常量样式：StyleRulesCallback=theme=>({
根目录：{
显示：“flex”，
辩护内容：“中心”，
对齐项目：“中心”
}
});
导出类型道具与道具样式=IPlaceholderProps&WithStyles；
导出类占位符扩展React.Component{
render（）{
返回
;
}
}
使用样式导出默认值（样式，{withTheme:true}）（占位符）；

将

类作为属性添加到IPlaceholderProps中：

export interface IPlaceholderProps {
    ...
    classes
}

我在尝试为我的样式创建类型时也遇到了一些问题，所以在这里，如果材质ui中的样式不起作用，如何正确地键入样式

const styles = (props) => ({
  container: {
    display: 'flex',
  }      
})
 

type Props = {
  blabla: string;
  classes: Record<keyof ReturnType<typeof styles>, string>
}

const styles=（道具）=>({
容器：{
显示：“flex”，
}      
})
类型道具={
布拉布拉：字符串；
课程：记录
}

您可能还希望为此创建实用程序类型

const styles = (props) => ({
  container: {
    display: 'flex',
  }       
})
 

type MaterialStyle<S> = { 
  classes: Record<keyof S, string>
}


type Props = {
  blabla: string;
} & MaterialStyle<ReturnType<typeof styles>>

const styles=（道具）=>({
容器：{
显示：“flex”，
}       
})
类型MaterialStyle={
课程：记录
}
类型道具={
布拉布拉：字符串；
}材料与风格

如果您能找到一种更好、更短的方法来做同样的事情，请告诉我：）
这确实可以让它编译，谢谢。不过，有点觉得withStyles不值得这么多样板。来自谷歌，请查看