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