[英]React material-ui withStyles on external file not working
I took a look a this question , but still did manage to get this to work. 我看了一个这个问题 ,但仍然设法让这个工作。
The intention is to separate the styles from the component file in order to have a cleaner setup. 目的是将样式与组件文件分开,以便进行更清晰的设置。
It works fine when there is no theme
involved. 当没有涉及
theme
时,它工作正常。
I did try several iterations, with or without wrapping withStyles
in the styles.js files. 我确实尝试了几次迭代,在styles.js文件中包含或不
withStyles
withStyles。
The particular example below will of course throw error 下面的具体示例当然会抛出错误
TypeError: "theme.spacing is not a function"
So I have created a file for the css
as follows 所以我为
css
创建了一个文件,如下所示
styles.js styles.js
import { withStyles } from '@material-ui/core/styles';
export default theme => ({
...
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
}
...
});
Then on the component file: 然后在组件文件上:
login.js login.js
import styles from './styles';
...
render() {
const { classes } = this.props;
}
...
export default withCookies(withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles, { withTheme: true })(Login))));
import { withStyles } from '@material-ui/core';
import { Component } from './component';
import { Styles } from './styles';
export const StyledContainer = withStyles(
CStyles,
)(Component);
and in styles.ts 并在styles.ts
import { createStyles, Theme } from '@material-ui/core/styles';
/**
* Styles for Component
*/
export const Styles = (theme: Theme) =>
createStyles({
'.className': {
fontSize: 10,
},
});
Which material-ui version are you using? 您使用的是哪种材料-ui版本?
In 4.x
version, theme.spacing
is a function: 在
4.x
版本中, theme.spacing
是一个函数:
export interface Spacing {
(): number;
(value1: SpacingArgument): number;
(value1: SpacingArgument, value2: SpacingArgument): string;
(value1: SpacingArgument, value2: SpacingArgument, value3: SpacingArgument): string;
(
value1: SpacingArgument,
value2: SpacingArgument,
value3: SpacingArgument,
value4: SpacingArgument,
): string;
}
but in 3.x
, theme.spacing
is a object: 但在
3.x
, theme.spacing
是一个对象:
export interface Spacing {
unit: number;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.