如何设置 Material UI 框组件的样式以进行叠加

Question

在设计组件并使它们看起来像我想要的方式方面，我真的很新。

我想要的结果是让两个盒子组件相互重叠，以获得漂亮干净的外观，以显示用户统计数据和当天的剩余目标。

我的想法是：

如果有人能给我一些关于将盒子组件样式设置为如上图所示的指示，我将非常感激。

Answer 1

首先请查看 MUI Box，它提供了使用 Material-UI 的 Box 组件的精彩描述。

这是链接中的示例

<Box
  sx={{
    width: 300,
    height: 300,
    backgroundColor: 'primary.dark',
    '&:hover': {
      backgroundColor: 'primary.main',
      opacity: [0.9, 0.8, 0.7],
    },
  }}
/>

sx 用于设置 Box 组件的样式，在这个示例中我们可以看到我们可以从组件本身更改框的宽度、高度和背景颜色。对于类似于您所要求的内容，我冒昧地使用样式化组件来设置 Box 组件的样式，如下所示：

import * as React from "react";
import Box from "@mui/material/Box";
import styled from "styled-components";

const DataBoxContainer = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 20vh;
  position: relative;
`;

const StyledOuterBox = styled(Box)`
  border-radius: 20px;
  position: absolute;
`;

const StyledInnerBox = styled(Box)`
  border-radius: 10px;
  position: relative;
  bottom: 50px;
`;

const StyledData = styled.p`
  color: black;
  align-self: flex-start;
  position: absolute;
  bottom: 30px;
  margin-inline-start: 20px;
`;

export default function DataBox() {
  return (
    <DataBoxContainer>
      <StyledOuterBox
        sx={{
          width: 500,
          height: 250,
          backgroundColor: "gray"
        }}
      >
        <StyledData>test</StyledData>
      </StyledOuterBox>
      <StyledInnerBox
        sx={{
          width: 480,
          height: 200,
          backgroundColor: "blue"
        }}
      />
    </DataBoxContainer>
  );
}

请随意在 CodeSandbox 玩这个示例 我确信这可以改进，但可以让您了解如何开始。 请随时向我询问任何问题，因为您要求指点，但我已经提供了代码。