reactjs - 基于海拔的 Material UI 纸背景颜色？

Question

我正在尝试制作一个使用 Material 指南的深色主题 React 前端。根据dark theme specifications , 表面应该随着每个高程级别而变亮。这似乎不适用于 elevation material-ui的Paper组件中的属性，好像只加了一个阴影。我想知道这个规范是否已经实现，或者产生这种效果的最佳解决方案是什么。
例子:

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

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

Answer 1

刚遇到同样的问题。似乎 material-ui 仅通过添加框阴影来实现高程。
我想出了一个快速解决方案( typescript ):

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 产生了不错的外观。然而，我只是通过一些试验和错误想出了它。可能有更复杂的方法。