MUI 组件的类型中缺少 Typescript Material UI 属性“类”

loala.js

长话短说,打字稿抱怨property classes每个 material-ui 组件缺失换句话说,Typescript 强制该classes属性存在于几乎每个 material-ui 组件中这是使用 webpack 编译期间的错误消息ts-loader

我有以下代码,

头文件.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;

我有Toolbar以下消息的错误

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; }'

对于AppBarTypography我加入,我不接受错误classes property与定义我的风格function decorator和一个空的对象; 但是,不可能只使用 style & className properties

<AppBar position="static" style={exampleStyleObj} className={exampleClass} >

我遵循使用withStylematerial-ui doc 中的装饰器的样式方法

CSS IN JS & Over
https://material-ui-next.com/customization/css-in-js/

覆盖
https://material-ui-next.com/customization/overrides/

Typescript Material-UI 指南
https://material-ui-next.com/guides/typescript/

我正在使用,[email protected] [email protected]

我检查过是否存在相同的问题并在其他地方回答,甚至检查了 material-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)。但是,到目前为止,我没有多少运气来解决这些问题。

请帮忙!

loala.js

我想回答我的问题。感谢来自 material-ui gitter 的Tom Crockett

2.4.0由于 material-ui 组件的类型差异,使用 Typescript将不起作用。但是,2.4.2补丁可以解决问题。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

ReactJS material-ui 使用类 `Mui-disabled` 作为只读组件

带有MUI样式组件API的Material UI链接按钮

Material UI中缺少组件

Material-UI Typescript如何从组件类中的makeStyle()创建样式实例

KeyBoardDatePicker组件,Material-ui / pickers,Typescript中的labelFunc中的类型错误

Mui-datatables Material-UI:TablePagination 的页面属性超出范围

组件上缺少TypeScript ReactDOM属性“类型”

Material-ui 中的 makeStyles 需要使用这么多(!important <= css 代码)来设置 mui 组件的样式

使用SASS类覆盖Material UI组件

ReactJS Material UI组件CSS类,澄清

Material-ui 中基于类的样式

TypeScript错误-React Mui MenuItem上不存在属性组件

TypeScript 3:类型中缺少属性

TypeScript错误:类型“ ...”中缺少属性“ ...”

如何扩展 Material ui 主题类型并修改 Typescript 中的现有类型?

通过containerElement属性将NavLink传递到Material UI组件会给出“属性类型失败”警告

在 Typescript 中,返回 MUI TableContainer 的组件的返回类型应该是什么?

无法获取Material-UI的目标属性-选择React组件

Material-ui的CardActionArea组件属性的打字稿错误

对于Material UI,我如何知道每个组件的属性?

Material-UI-TypeScript-通用自动完成

无法读取 Material UI 类

如何在样式化组件中过度编写material-ui的嵌套类?

如何在Material-UI的Card组件中覆盖“ MuiPaper-elevation1”属性?

Material-ui v4在html DOM类属性中显示组件名称?

如何使用 Material-UI AppBar onTitleClick 属性在 React 中渲染新组件?

使用TypeScript时如何将prop传递给material-ui @ next中的自定义根组件?

如何在Material UI中插入变量类名称?

在material-ui中为JSS创建通用样式类