javascript - 使用 Material UI V1 渲染具有自定义样式的组件

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 是如何组合在一起的。

此外，我没有明确说明这一点，但根据 Material UI，所有 Paper Prop 都对 Card Prop 有效，以防你想知道我为什么引用 纸质文档。

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

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)