React Material 设计：使用 React material 在 class 组件中使用 redux 设计自定义样式

Question

我正在使用 react material design 和 redux，我有一个 class component.I 正在尝试向 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 文档完成了主题配置的所有其他事情但是这是我得到的结果：

将添加 class，但 css 无法正确呈现

Answer 1

您不应该使用 class 组件和 material UI，您应该重构您的组件以实现功能。

Answer 2

通过这些更改它工作正常：

const styles = theme => ({
    speedDial: {
        position: 'absolute'
    }
});

和：

export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(ToolBar))

React Material 设计：使用 React material 在 class 组件中使用 redux 设计自定义样式

React Material Design : using react material design custom style with redux in class component

reactjs

redux

react-material