0

私はreactマテリアルデザインと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 documentation に従って、テーマ構成の他のすべてのことを行いましたが、結果は次のとおりです。 ここに画像の説明を入力

クラスは追加されますが、CSS が正しくレンダリングされません

4

2 に答える 2

0

クラス コンポーネントとマテリアル UI を使用しないでください。コンポーネントを機能するようにリファクタリングする必要があります。

于 2020-05-06T18:09:15.803 に答える