React withStyles 使用“方向”时抛出错误答案

【问题标题】：React withStyles throws error when using 'direction'React withStyles 使用“方向”时抛出错误
【发布时间】：2019-11-10 12:08:37
【问题描述】：

我有一个简单的 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)'.

感谢您的帮助。

【问题讨论】：

您是否在项目的其他部分使用打字稿？

标签： javascript reactjs material-ui react-with-styles

【解决方案1】：

这是因为direction 属性中没有类型column。它可以是一个字符串类型：

ltr
rtl
初始
继承

【讨论】：

感谢您的回答卡里姆。我要离开文档here，它显示direction 可以有column 以及其他用于材质ui 网格的东西。将direction="column" 直接添加到 Grid 标记可以按预期工作。我只是对为什么在使用 withStyles() 时它不起作用感到困惑。
那是因为 withStyles 是 piure css，在 css 中你没有 column 在“方向”。见[这个]。 Howerver：您现在写的是：您是否已将新道具添加到网格组件。所以这是 JSX，而不是 HTML 或 CSS。网格组件采用：direction = "column" 属性并分配 css 样式以使其看起来像你想要的那样。所以原因是您正在编写 Grid Component [this] 理解的 JSX 属性：w3schools.com/cssref/pr_text_direction.asp
这说明了，非常感谢！有没有办法在标签之外使用 direction 属性作为样式，或者最好将它写在每个标签中？
实际上你不能，我们不知道库如何构建代码以适应 direction="column" 道具。最佳实践是设计您自己的包装器组件，并根据需要设置其样式 <Column> 例如。现在，每次你想要这个样式到任何具有这种样式的组件时，只需用你构建的Column 组件包装它。其他解决方案是简单地将所有样式添加到 css 类中，然后随心所欲地使用它

【解决方案2】：

你也可以试试下面这行export default withStyles(styles as {})(App); 救了我。

【讨论】：