How can i do Inset FAB using Material UI in React?

Issue

i'm currently i'm working in a project that is required to have a "Inset Fab" button between containers. I saw in the Material Design documentation that the name of the component is called "Inset FAB", i'd got some tutorials on google (but didn't find many) on how to implement, but normally they are "workaround" (setting a background border with radius behind the button). I'm still puzzled in how to do it. Currently i'm using the MUI/Material UI 5.

Example of inset Fab

Solution

from what I understand inset is done through box shadows. specifically

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

here is a code sandbox I threw together

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"));

Answered By - spotexx