使用 'direction' 时 React withStyles 抛出错误
React withStyles throws error when using 'direction'
我有一个简单的 React 网站,我正在使用 withStyles 功能将样式传递给 material-ui 网格元素。尝试在样式中使用 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)'.
感谢您的帮助。
这是因为direction
属性中没有类型column
。
它可以采用以下类型的字符串:
- ltr
- rtl
- 初始
- 继承
你也可以试试下面这行 export default withStyles(styles as {})(App);
救了我。
我有一个简单的 React 网站,我正在使用 withStyles 功能将样式传递给 material-ui 网格元素。尝试在样式中使用 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)'.
感谢您的帮助。
这是因为direction
属性中没有类型column
。
它可以采用以下类型的字符串:
- ltr
- rtl
- 初始
- 继承
你也可以试试下面这行 export default withStyles(styles as {})(App);
救了我。