如何使用 MUI 5.5.2 设置一些打印样式

Question

我想添加一些特定的打印样式，但我正在努力寻找有关如何使用 MUI 的主题系统来实现这一点的任何文档。

declare module '@mui/material/styles' {
    interface Theme {
      "@media print": ThemeOptions,
    }
    // allow configuration using `createTheme`
    interface ThemeOptions {
      "@media print"?: ThemeOptions;
    }
}
const theme = createTheme({
    typography: {
        h2: {
            fontSize: '2rem',
            fontWeight: 700,
            borderBottom: '2px solid black',
        },
    },
    '@media print': {
        typography: {
            h2: {
                fontSize: '8rem',
                borderBottom: '20px solid red',
                color: blue[100],
            }
        }
    },
});

在上面的示例中，我可以正常看到我对 h2 所做的更改，但是当我去打印时，我没有看到应用的打印样式。

Answer 1

当 MUI 应用 variant-specific 样式时，它使用 the following line:

...(ownerState.variant && theme.typography[ownerState.variant]),

在您的示例中使用“h2”的变体，这意味着它只会找到 theme.typography.h2 内的样式。没有代码会在 theme['@media print'] 寻找任何东西。任何 media-query-specific 样式都需要嵌套在 theme.typography.h2 中。下面是一个工作示例。

import { createTheme, ThemeProvider } from "@mui/material/styles";
import Typography from "@mui/material/Typography";

const theme = createTheme({
  typography: {
    h2: {
      fontSize: "2rem",
      fontWeight: 700,
      borderBottom: "2px solid black",
      "@media print": {
        fontSize: "8rem",
        borderBottom: "20px solid red",
        color: "blue"
      }
    }
  }
});
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="h2">Hello CodeSandbox</Typography>
    </ThemeProvider>
  );
}

如何使用 MUI 5.5.2 设置一些打印样式

How can I setup some print styles using MUI 5.5.2

reactjs

material-ui