使用Material UI V1渲染具有自定义样式的Component

Question

利用Redux和Material UI V1，我正在做一些根本错误的事情，我正在寻求帮助。我无法成功地将我的Card组件的宽度设置为75像素。

我们如何利用withStyles和connect将自定义样式传递给我们的组件？我一直在关于here组件的Material UI文档中的一个示例Paper，但是无法成功设置我的UI样式。以下是我的演示文稿和容器组件的代码片段：

容器：

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;

编辑：

我还利用这个SO post来了解Redux和Material UI API如何组合样式。

此外，我没有明确说明这一点，但根据材料用户界面，所有Paper道具都适用于Card道具，如果你想知道为什么我引用Paper文件。

我还替换了以前直接链接到我的项目的代码片段。

Answer 1

我认为你的表现部分可以表达自己的风格。

使用withStyles导出您的演示组件：

import Card from 'material-ui/Card';
import { withStyles } from 'material-ui/styles';
import PropTypes from 'prop-types';
import React from 'react';

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

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

Component.propTypes = {
  classes: PropTypes.shape({
    root: PropTypes.string,
  }).isRequired,
};

export default withStyles(styles)(Component);

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

export default connect(mapStateToProps, mapDispatchToProps)(Home)