![useStyle]( "useStyle")
本文介绍了如何在 Material Ui 中使用 useStyle 为类组件设置样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用 useStyle 来设置 Class Component 的样式.但这可以很容易地完成钩子.但我想改用组件.但我不知道如何做到这一点.
import React,{Component} from 'react';从@material-ui/core/Avatar"导入头像；从'@material-ui/core/styles'导入{makeStyles}；从@material-ui/icons/LockOutlined"导入 LockOutlinedIcon；const useStyles = makeStyles(theme => ({'@全球的': {身体: {背景颜色:theme.palette.common.white，},},纸: {marginTop: 主题.spacing(8),显示:'弹性'，flexDirection: '列',alignItems: '中心',},头像:{边距:theme.spacing(1),背景颜色:theme.palette.secondary.main，}}));类登录扩展组件{const 类 = useStyle();//如何分配UseStyle使成为(){返回(<div className={classes.paper}><头像类名={classes.avatar}><LockOutlinedIcon/></头像>
}}导出默认登录；
解决方案
你可以这样做:
import { withStyles } from "@material-ui/core/styles";const 样式 = 主题 =>({根: {背景颜色:红色"}});类 ClassComponent 扩展组件 {状态 = {搜索节点:"};使成为() {const { 类} = this.props;返回 (<div className={classes.root}>你好！</div>);}}导出默认 withStyles(styles, { withTheme: true })(ClassComponent);
如果您不使用主题，请忽略 withTheme: true.
要在 TypeScript 中实现此功能，需要进行一些更改:
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";const 样式 = 主题 =>创建样式({根: {背景颜色:红色"}});interface Props extends WithStyles{ }类 ClassComponent 扩展了 Component{//其余代码保持不变
I want to use useStyle to style the Class Component . But this can be easily done hooks. but i want to use Component instead. But I cant figure out how to do this.
import React,{Component} from 'react';
import Avatar from '@material-ui/core/Avatar';
import { makeStyles } from '@material-ui/core/styles';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
const useStyles = makeStyles(theme => ({
'@global': {
body: {
backgroundColor: theme.palette.common.white,
},
},
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
}
}));
class SignIn extends Component{
const classes = useStyle(); // how to assign UseStyle
render(){
return(
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
</div>
}
}
export default SignIn;
解决方案
You can do it like this:
import { withStyles } from "@material-ui/core/styles";
const styles = theme => ({
root: {
backgroundColor: "red"
}
});
class ClassComponent extends Component {
state = {
searchNodes: ""
};
render() {
const { classes } = this.props;
return (
<div className={classes.root}>Hello!</div>
);
}
}
export default withStyles(styles, { withTheme: true })(ClassComponent);
Just ignore the withTheme: true if you aren't using a theme.
To get this working in TypeScript, a few changes are needed:
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
const styles = theme => createStyles({
root: {
backgroundColor: "red"
}
});
interface Props extends WithStyles<typeof styles>{ }
class ClassComponent extends Component<Props> {
// the rest of the code stays the same
这篇关于如何在 Material Ui 中使用 useStyle 为类组件设置样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！