Material-UI和Typescript

Question

我是TypeScript的新手，正在尝试遵循material-ui存储库中提供的示例。提供的示例代码正在传递root CSS类。我想通过‘`root’传递更多的CSS类。

const styles: StyleRulesCallback<'root'> = theme => ({
  root: {
    textAlign: 'center',
    paddingTop: theme.spacing.unit * 20,
  }
});

这里是material-ui提供的完整示例代码的链接。

https://github.com/mui-org/material-ui/blob/v1-beta/examples/create-react-app-with-typescript/src/pages/index.tsx

Answer 1

您可以这样实现它：

const styles: StyleRulesCallback = theme => ({
    paper: {
        maxWidth: 1000,
        minWidth: 1000,
        display: 'inline-block'
    },
    table: {
        maxWidth: 1000,
    },
});

并在组件中使用该类，如下所示：

 <Paper className={classes.paper}>

将这个样板作为参考：https://github.com/innFactory/create-react-app-material-typescript-redux

Answer 2

Toni提供的东西在4.1.1 (我正在使用的那个)中似乎不再起作用。相反，您需要的内容如下所示

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

interface IComponentProps {
  // props
}

const styles: StyleRulesCallback<Theme, IComponentProps> = theme = ({
  someClass: {}
  someClassWithProps: (props) => ({})
})

或者，如果您更喜欢使用createStyles

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

interface IComponentProps {
  // props
}

const styles = (theme: Theme) => createStyles({
  someClass: {}
  someClassWithProps: (props: IComponentProps) => ({})
});