Actualmente estoy trabajando en un proyecto que requiere tener un botón "Insertar Fab" entre contenedores. Vi en la documentación de Material Design que el nombre del componente se llama "Inset FAB", obtuve algunos tutoriales en Google (pero no encontré muchos) sobre cómo implementar, pero normalmente son "soluciones alternativas" (configuración un borde de fondo con un radio detrás del botón). Todavía estoy desconcertado en cómo hacerlo. Actualmente estoy usando MUI/Material UI 5.
por lo que entiendo, el recuadro se realiza a través de sombras de cuadro. específicamente
boxShadow: "0px 0px 0px 5px white inset"aquí hay un código sandbox que armé
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"));