javascript - how to use styled components to style the printing of a component? - Stack Overflow

admin管理员组

文章数量:1421245

I am trying to control the size/orientation when printing a ponent using styled-ponents. My question is: how can I use the @page CSS at-rule, or another method to style the printing ponent, with styled ponents?

CSS @page documentation:

/@page

I have tried:

const PrintSchedulesContainer = styled.div`
  display: none;
  @media print and (min-width: 480px) {
    padding: none;
    margin: none;
  }
`;

And:

const PrintSchedulesContainer = styled.div`
  display: none;
  @page {
    size: landscape;
  }
`;

I am trying to control the size/orientation when printing a ponent using styled-ponents. My question is: how can I use the @page CSS at-rule, or another method to style the printing ponent, with styled ponents?

CSS @page documentation:

https://developer.mozilla/en-US/docs/Web/CSS/@page

I have tried:

const PrintSchedulesContainer = styled.div`
  display: none;
  @media print and (min-width: 480px) {
    padding: none;
    margin: none;
  }
`;

And:

const PrintSchedulesContainer = styled.div`
  display: none;
  @page {
    size: landscape;
  }
`;

• javascript
• css
• reactjs
• styled-ponents

Share Improve this question Follow edited Aug 14, 2019 at 20:22 Emile Bergeron 17.4k55 gold badges8585 silver badges132132 bronze badges asked Aug 14, 2019 at 20:11 jonniejonnie 76511 gold badge1313 silver badges2323 bronze badges 1

• 1 change the title to a property one that describes your question – Lucas Vazquez Commented Aug 14, 2019 at 20:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You can't target a single ponent to print.
You need to hide the other elements in order your ponent to be the only one printed.

@page works only for changing printing rules.
@media print let you define other class styles as well just like @media screen.

You can use @media print inside a wrapper styled ponent, making it fullscreen, fixed with a white background.

Example:

const PrintableBodyWrapper = styled.div`
  @media print {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
`;

function App() {
  return (
    <div className="App">
        <PrintableBodyWrapper>
          <div style={{ width: 100, height: 100, background: "grey" }}>
            I will be printed
          </div>
        </PrintableBodyWrapper>
    </div>
  );
}

To change print rules you need to add the @page into a global style and render the global style ponent.

import styled, { createGlobalStyle } from "styled-ponents";

const GlobalStyle = createGlobalStyle`
  @page {
    size: landscape;
    margin: 5cm;
`;

const PrintableBodyWrapper = styled.div`
  @media print {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
`;

function App() {
  return (
    <div className="App">
        <GlobalStyle />
        <PrintableBodyWrapper>
          <div style={{ width: 100, height: 100, background: "grey" }}>
            I will be printed
          </div>
        </PrintableBodyWrapper>
    </div>
  );
}

本文标签： javascripthow to use styled components to style the printing of a componentStack Overflow