Question

我正在尝试制作一个使用Material准则的深色主题React前端。根据{{3}}，应在每个高程级别下使表面变亮。这似乎不适用于material-ui的Paper组件中的elevation属性，它似乎仅添加了阴影。我想知道该规范是否已经实施，或者具有这种效果的最佳解决方案是什么。

示例：

<Paper elevation={1}>
    <Typography variant="h6">Paper1</Typography>
</Paper>
<Paper elevation={5}>
    <Typography variant="h6">Paper2</Typography>
</Paper>

这两张纸的高度不同，但背景颜色仍然相同。

Answer 1

刚遇到同样的问题。似乎 material-ui 仅通过添加框阴影来实现高程。我想出的一个快速解决方案（打字稿）：

import { lighten, makeStyles, Paper, Theme } from "@material-ui/core";
import React from "react";

const useStyles = makeStyles<Theme, { elevation: number }>((theme) => ({
  paper: {
    boxShadow: (props) => theme.shadows[props.elevation],
    backgroundColor: (props) =>
      lighten(theme.palette.background.paper, props.elevation * 0.025),
  },
}));


export const CustomPaper: React.FC<{elevation: number}> = ({ children, elevation }) => {
  const classes = useStyles({ elevation });
  return (
    <Paper className={classes.paper}>
      {children}
    </Paper>
  );
};

我发现因子 0.025 产生了不错的外观。然而，我只是通过一些试验和错误想出了它。可能有更复杂的方法。

材质UI Paper背景颜色基于高程？

1 个答案: