Material-UI @page rule? - PullRequest
Новая
       40

Material-UI @page rule?

1 голос
/ 12 апреля 2020

Я пытаюсь использовать стили Material-UI с реакцией на печать для печати компонентов, но у меня есть определенный c компонент, который должен иметь определенный c размер страницы. Для этого я хотел бы сделать что-то вроде этого: 

const styles = (theme: Theme) => ({
 container: {
     display: "none",
     '@media print': {
         display: "block"
     },
     '@page': {
         size: "auto"
     }
}});

Но когда я использую правило @page, я получаю эту ошибку: Невозможно прочитать свойство 'addRule' из null. Если я удалю @page, проблем нет. Есть ли простое исправление для этого?

Для справки, это мой полный компонент: 

import React, { Component } from 'react';
import { Theme, WithStyles, withStyles } from '@material-ui/core';

interface IProps extends WithStyles<typeof styles> {

}

interface IState {

}

const styles = (theme: Theme) => ({
    container: {
        display: "none",
        '@media print': {
            display: "block"
        },
        '@page': {
            size: "5cm 5cm"
        }
    }
});

class ComponentToPrint extends Component<IProps, IState> {
    render() {
        const { classes } = this.props;
        return (
            <div className={classes.container}>
                Hola
            </div>
        );
    }
}

export default withStyles(styles)(ComponentToPrint);

Я недавно использую стили Material-UI, но мне действительно нужно иметь локальные стили в моих печатаемых компонентах. Если вы думаете о более простом решении, я открыт для новых идей.

...