时间戳

首页 > 解决方案 > 基于高度的材料UI纸张背景颜色？

reactjs - 基于高度的材料UI纸张背景颜色？

问题描述

我正在尝试制作一个使用 Material 指南的黑暗主题的 React 前端。根据深色主题规范，每个标高都应使表面变亮。这似乎不适用于elevationmaterial-ui 的 Paper 组件中的属性，它似乎只添加了一个阴影。我想知道这个规范是否已经实现，或者产生这种效果的最佳解决方案是什么。

例子：

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

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

标签： reactjsmaterial-ui

解决方案

刚刚遇到了同样的问题。似乎 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 产生了不错的外观。但是，我只是通过一些试验和错误想出了它。可能有更复杂的方法。

推荐阅读