如何导出具有 2 个样式对象的 react material-ui 组件？（材料-ui V1）答案

【问题标题】：How can I export a react material-ui component with 2 styles object? (material-ui V1)如何导出具有 2 个样式对象的 react material-ui 组件？（材料-ui V1）
【发布时间】：2018-02-14 17:32:35
【问题描述】：

我们正在使用 material-ui v1 来组合 HOC，我们正在使用 recompose 实用程序。问题是我们有 2 个样式对象。一个在组件内部定义，另一个是通用样式对象（在另一个 jsx 样式文件中定义，该文件导出系统范围内使用的 javascript 样式对象）。现在我们需要组合这两个样式对象。有没有办法做到这一点？ 用 withStyles 组合 2 个样式对象不起作用。 任何帮助将不胜感激。

这是我们的代码：

import { connect } from 'react-redux';
import { withStyles } from 'material-ui/styles';
import compose from 'recompose/compose';
import { generalStyle } from '../../modules/styles/styles';//external style object

//internal style object
const styleObj = theme => ({
  paper: {
    padding: 16,
    color: theme.palette.text.secondary,
  },
});

class myCompo extends React.Component {
//..compo code
}

//composing 2 style objects with withStyles does not work
export default compose(
  withStyles({ styleObj, generalStyle }),
  connect(mapStateToProps, mapDispatchToProps),
)(myCompo );

//here is how generalStyle is defined in styles.jsx file
const generalStyle = theme => ({
  floatR: {
    float: 'right',
  },
  floatL: {
    float: 'left',
  },
  parallelItmes: {
    display: 'flex',
    alignItems: 'center',
    padding: theme.spacing.unit,
    paddingLeft: theme.spacing.unit + 10,
  },
});

module.exports = {
  generalStyle,
};

【问题讨论】：

不确定，但也许你可以试试export default compose( withStyles({ styleObj }), withStyles({ generalStyle }), connect(mapStateToProps, mapDispatchToProps), )(myCompo );
感谢 Subham 的回复。我已经尝试过了，它以红色显示此警告消息：警告：Material-UI：提供给 classes 属性的密钥 paper 未在 Connect(myCompo) 中实现。
您是否有理由不采用 generalStyle 并使用扩展运算符（即 ...generalStyle）将其合并到内部样式对象中？这将有效地允许您在需要的任何地方使用这两种样式。
感谢朱尔斯的回复。我尝试传播 gerealStyle，但没有奏效。也许我做错了。这就是我尝试这样做的方式：const styleObj = theme => ({ ...generalStyle, paper: { //rest of style 。你能告诉我正确的方法来回答这个问题吗？

标签： javascript reactjs material-ui

【解决方案1】：

假设您有 generalyStyles 定义如下：

const generalStyles = theme => ({
  generalStylesButton: {
    backgroundColor: "#ff0000",
    margin: theme.spacing.unit,
  },
});

然后，您可以通过执行函数将generalStyles 合并到您的internalStyles 中（根据您在 cmets 中的代码 sn-p，我认为这是您所缺少的），然后传播生成的对象：

const internalStyles = theme => ({
  internalStylesButton: {
    backgroundColor: "#00ff00",
    margin: theme.spacing.unit,
  },
  // Notice that since generalStyles is a function, not an object, you need
  // to execute it before you can merge
  ...generalStyles(theme)
});

那么两组样式中的样式都将可用：

function FlatButtons(props) {
  const { classes } = props;
  return (
    <div>
      <Button className={classes.internalStylesButton}>
        Styled from internal
      </Button>
      <Button className={classes.generalStylesButton}>
        Styled from general
      </Button>
    </div>
  );
}

FlatButtons.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(internalStyles)(FlatButtons);

您可能可以将此逻辑封装在 HOC 中，以避免在每个组件中重复展开运算符。您可能还需要注意generalStyles 和internalStyles 具有相同类名的情况：

const general = theme => ({
  duplicateName: {
    backgroundColor: "#ff0000",
  },
});

const internal = theme => ({
  duplicateName: {
    backgroundColor: "#00ff00",
  },
  ...general(theme),
});

让扩展运算符在这两种样式之间协调duplicateName 可能会导致棘手的情况。

【讨论】：