Передача параметров стиля с использованием JSS / Material-UI - PullRequest
Новая
       6

Передача параметров стиля с использованием JSS / Material-UI

0 голосов
/ 05 июля 2018

Я написал небольшой компонент-оболочку для Paper Material-UI Component: 

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, как я могу это осуществить? Или я думаю обо всем этом процессе неправильно?

1 Ответ

0 голосов
/ 06 июля 2018

Когда вы используете 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

...