Question

我为Paper Material-UI组件编写了一个小的包装器组件：

import React from 'react';
import Paper from '@material-ui/core/Paper';
import {withStyles} from '@material-ui/core/styles';

const styles = theme => ({
  root: {
    ...theme.mixins.gutters(),
    paddingTop: theme.spacing.unit * 2,
    paddingBottom: theme.spacing.unit * 2,
  },
});

const PaddedPaper = (props) => {
  const {classes, children} = props;

  return (
    <Paper className={classes.root}>
      {children}
    </Paper>
  );
};

export default withStyles(styles)(PaddedPaper);

您可能已经猜到了，它的用法如下：

<PaddedPaper>
  <p>Some content.</p>
</PaddedPaper>

使用JSS，是否可以将填充作为道具传递到PaddedPaper中？

<PaddedPaper padding={20}>
  <p>Some content.</p>
</PaddedPaper>

由于styles是在PaddedPaper类之外定义的，并且无权访问props，我该如何实现呢？还是我在错误地考虑整个过程？

Answer 1

使用withStyles时，您可以访问主题，但不能访问道具。

这仍然是一个持续存在的问题：https://github.com/mui-org/material-ui/issues/7633

在样式中使用道具的最简单方法是使用内联样式（目前）

像这样：

function PaperSheet(props) {
  return (
    <div>
      <PaddedPaper {...props} size={10}>
        <Typography variant="headline" component="h3">
          This is a sheet of paper.
        </Typography>
        <Typography component="p">
          Paper can be used to build surface or other elements for your
          application.
        </Typography>
      </PaddedPaper>
    </div>
  );
}

const PaddedPaper = props => {
  const { children, size } = props;
  console.log(size);
  return <Paper style={{ padding: size }}>{children}</Paper>;
};

这是一个有效的示例：https://codesandbox.io/s/yl4671wxz

使用JSS / Material-UI传递样式选项

1 个答案: