我正在使用react material design和redux,并且我有一个类组件。我正在尝试添加一些自定义样式到rmd speeddial组件,这是我的组件:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import { SpeedDial, SpeedDialIcon, SpeedDialAction } from '@material-ui/lab';
const useStyles = makeStyles((theme) => ({
speedDial: {
position: 'absolute'
}
}));
const actions = [...]
class ToolBar extends Component {
render() {
let { classes } = this.props;
return (
<SpeedDial
ariaLabel="SpeedDial Tools"
icon={<SpeedDialIcon />}
className={classes.speedDial}
open={this.state.open}>
{actions.map((action) => (
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
/>
))}
</SpeedDial>
)
}
}
const mapStateToProps = state => ({...})
export default connect(mapStateToProps, null)(withStyles(useStyles)(ToolBar))
我已经根据rmd文档为主题配置做了所有其他的事情,但这是我得到的结果:
类将被添加,但css不会正确呈现
2条答案
按热度按时间vmdwslir1#
你不应该使用类组件和材质UI,你应该重构你的组件功能。
du7egjpx2#
通过这些更改,它可以正常工作:
以及: