Javascript 使用材质UI V1使用自定义样式渲染组件

我利用Redux和MaterialUIV1做了一些根本错误的事情，我正在寻求帮助。我无法成功地将

卡
组件的宽度设置为75像素

我们如何利用
with style
和
connect
将自定义样式传递给组件？我一直在遵循
纸张组件上的Material UI文档中的一个示例，但未能成功设置UI样式。下面是my presentational和container组件的代码片段：

容器：

import compose from 'recompose/compose';
import { connect } from 'react-redux';
import { withStyles } from 'material-ui/styles';

import Home from '../components/Home';
import * as homeActions from '../modules/home';

const styles = theme => ({
  root: theme.mixins.gutters({
    width: 75,
  }),
});

const mapStateToProps = (state, ownProps = {}) => {
  return {
    props: {
      classes: styles,
      welcomeMessage: state.home.message || ''
    }
  };
};

const mapDispatchToProps = (dispatch, ownProps = {}) => {
  dispatch(homeActions.loadPage());

  return {
  };
};

export default compose(
  withStyles(styles),
  connect(mapStateToProps, mapDispatchToProps)
)(Home)

表象的：

import Card, { CardActions, CardContent, CardMedia } from 'material-ui/Card';
import Button from 'material-ui/Button';
import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
import Typography from 'material-ui/Typography';

import photo from './party.png';

const Component = ({props}) => {
  return (
        <div>
      <Card classes={{
        root: props.classes.card
      }}>
        This is Paper
      </Card>
    </div>
  );
}

Component.propTypes = {
  props: PropTypes.object.isRequired
};

export default Component;

从“物料界面/卡片”导入卡片，{CardActions，CardContent，CardMedia}；
从“物料界面/按钮”导入按钮；
从“道具类型”导入道具类型；
从“React”导入React；
从“react dom”导入react dom；
从“材料界面/排版”导入排版；
从“/party.png”导入照片；
常量组件=（{props}）=>{
返回(
这是一张纸
);
}
Component.propTypes={
props:PropTypes.object.isRequired
};
导出默认组件；

编辑：

我还利用这一点来了解用于样式设计的Redux和Material UI API是如何组合的

此外，我没有明确说明这一点，但根据材料界面，所有
纸张
道具对
卡片
道具有效，以防您想知道我为什么引用
纸张
文档

我还替换了以前直接链接到我的项目的代码片段。
我认为您的呈现组件可以表达自己的风格

使用
和样式导出您的演示组件：

从“物料界面/卡片”导入卡片；
从“材质ui/样式”导入{withStyles}；
从“道具类型”导入道具类型；
从“React”导入React；
常量样式=主题=>({
根：theme.mixins.gutters({
宽度：75，
}),
});
常量组件=（{classes}）=>{
返回(
这是一张纸
);
};
Component.propTypes={
类：PropTypes.shape({
root:PropTypes.string，
}).要求，
};
导出默认样式（样式）（组件）；

然后，在容器中，只需连接presentational组件的默认导出：

导出默认连接（mapStateToProps、mapDispatchToProps）（主）
谢谢您的回答。它引导我找到了解决方案，但它不是解决方案。我将在下面提供我的解决方案。呃，这怎么不是解决方案？你完全按照我说的做了。你在呈现组件中使用with样式，而在容器中不再使用。嘿，肯，我非常感谢你的回答。这肯定会让我找到解决办法。我很高兴把你的答案作为解决办法。为了记录在案，我需要做的不仅仅是在表象部分使用with-style。我还想使用容器中的道具。我将删除我的答案，因为它已被否决，可能是多余的。