我如何在 React 中使用 Material UI 进行 Inset FAB？

Question

我目前正在从事一个需要在容器之间具有“Inset Fab”按钮的项目。我在 Material Design 文档中看到该组件的名称称为“Inset FAB”，我在 google 上有一些关于如何实现的教程（但没有找到很多），但通常它们是“解决方法”（设置按钮后面有半径的背景边框）。我仍然对如何做到这一点感到困惑。 目前我正在使用 MUI/Material UI 5。

Example of inset Fab

Answer 1

据我了解，插图是通过盒子阴影完成的。 具体

boxShadow: "0px 0px 0px 5px white inset"

这是我拼凑的code sandbox

import React from "react";
import ReactDOM from "react-dom";
import { Box, Fab } from "@material-ui/core";

const appBarStyle = {
  height: "100px",
  backgroundColor: "blue",
  position: "relative"
};
const fabWithInset = {
  position: "absolute",
  backgroundColor: "red",
  boxShadow: "0px 0px 0px 0px white inset",
  left: "50%",
  bottom: "0px",
  transform: "translate(0%,50%)",
  "&:onclick": {
    boxShadow: "0px 0px 0px 5px white inset"
  }
};
function App() {
  return (
    <Box style={appBarStyle}>
      <Fab style={fabWithInset} />
    </Box>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));