реагировать на редукционный способ печати реквизита

Question

• я пытаюсь включить мой общий компонент в мой main.js
• этот я сделал это успешно.
• но в моем общем компоненте я пытаюсь распечататьмои значения данных редукса.
• , поэтому я создал метод handleClickForRedux для печати значений.
• Я включил mapStateToProps и mapDispatchToProps
• , но по-прежнему значение не печатается в этой строке,console.log("event reddux props--->", props);
• подскажите, как это исправить.
• предоставив мой фрагмент кода и песочницу ниже.

https://codesandbox.io/s/react-redux-example-265sd

scroll.js

import React, { useEffect, useState, Fragment } from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
//import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import Drawer from "@material-ui/core/Drawer";
import { bindActionCreators } from "redux";
import * as actionCreators from "../actions/actionCreators";

import { connect } from "react-redux";
import { compose } from "redux";

function SportsMouse(classes, props) {
  // const [canEdit, setCanEdit] = useState(false);

  function handleClickForRedux(event) {
    console.log("event--->", event);
    console.log("event reddux props--->", props);
  }

  return (
    <Card>
      <div onClick={handleClickForRedux}>I am here </div>
    </Card>
  );
}

SportsMouse.propTypes = {
  classes: PropTypes.object.isRequired
};

function mapStateToProps(state) {
  return {
    posts: state.posts,
    comments: state.comments
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch);
}

export default compose(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(SportsMouse);

main.js

import React from "react";
import { Link } from "react-router-dom";

import Scroll from "../commonComponents/scroll";

const Main = props => {
  const { children, match, ...rest } = props;
  return (
    <div>
      <h1>
        <Scroll />
        <Link to="/">Reduxstagram</Link>
      </h1>
      {React.Children.map(children, child => React.cloneElement(child, rest))}
    </div>
  );
};

export default Main;

Answer 1

Даже при использовании material-ui компоненты принимают только один аргумент. classes существует внутри props. Если вы console.log(classes), вы увидите, что он содержит все ваши реквизиты, включая стили материала-UI. Должно быть так:

function SportsMouse(props) {