React Material Design：在类组件中使用带有 redux 的 React Material Design 自定义样式

Posted 2023-02-22

【中文标题】React Material Design：在类组件中使用带有 redux 的 React Material Design 自定义样式

【英文标题】：React Material Design : using react material design custom style with redux in class component

【发布时间】：2020-08-21 19:46:55

【问题描述】：

我正在使用 react material design 和 redux，并且我有一个类组件。我正在尝试向 rmd 快速拨号组件添加一些自定义样式，这是我的组件：

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 无法正确呈现

【参考方案1】：

你不应该使用类组件和材质 UI，你应该将你的组件重构为功能性的。

【讨论】：

但我需要这种方式，我认为根据文档不会避免它

也许这很有用。 ***.com/questions/56554586/…

【参考方案2】：

通过这些更改可以正常工作：

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

和：

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