当使用'方向'时，React withStyles会引发错误

Question

我有一个简单的React网站，并且正在使用withStyles功能将样式传递给material-ui Grid元素。尝试在样式中使用direction: "column"时，出现以下错误消息。

这是一个.jsx文件。我通过指定类型找到了一个修复程序，但是仅适用于TypeScript。

这是App.jsx文件：

const styles = theme => ({
    root: {
        direction: "column",
        justify: "center",
        alignItems: "center",
    },
});

function App(props) {

    return (
        <div>
            <Grid container className={props.classes.root} >
                <Typography variant="h2">
                    Test Website
                </Typography>
                <TextField
                    id="input-user"
                    label="User"
                    value={1}
                    margin="normal"
                    variant="outlined"
                />

            </Grid>
        </div>
    )

}

export default withStyles(styles)(App);

我收到的错误消息是：

Argument of type '(theme: any) => { root: { direction: string; justify: string; alignItems: string; }; }' is not assignable to parameter of type 'Styles<Theme, {}, "root">'.
  Type '(theme: any) => { root: { direction: string; justify: string; alignItems: string; }; }' is not assignable to type 'StyleRulesCallback<Theme, {}, "root">'.
    Type '{ root: { direction: string; justify: string; alignItems: string; }; }' is not assignable to type 'Record<"root", CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)>'.
      Types of property 'root' are incompatible.
        Type '{ direction: string; justify: string; alignItems: string; }' is not assignable to type 'CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)'.
          Type '{ direction: string; justify: string; alignItems: string; }' is not assignable to type 'CreateCSSProperties<{}>'.
            Types of property 'direction' are incompatible.
              Type 'string' is not assignable to type '"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "ltr" | "rtl" | ((props: {}) => DirectionProperty)'.

谢谢您的帮助。

Answer 1

这是因为column属性中没有类型direction。 它可以采用以下类型的字符串：

• ltr
• rtl
• 初始
• 继承

Answer 2

您也可以尝试以下行export default withStyles(styles as {})(App);，它救了我。