Estoy desarrollando una plataforma sin código donde puedes arrastrar y soltar elementos HTML.
Se requieren 2 cosas:
Para 1) he usado esta solución:
Selector.js
export default Selector = ({children}) => { const [isHovered, setIsHovered] = useState(false); const mouseOverHandler = (ev) => { ev.stopPropagation(); setIsHovered(true); } const mouseOutHandler = (ev) => { ev.stopPropagation(); setIsHovered(false); } return ( <div className="container" onMouseOver={mouseOverHandler} onMouseOut={mouseOutHandler}> {children} { isHovered && <div className="overlay"></div> } </div> ); }Selector.css
.container { position: relative; // For .overlay to be absolute max-width: fit-content; // To fit children/content size } .overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(122, 122, 122, 0.2); }Aplicación.js
export default App = () => [ return ( <div className="workspace"> <Selector><Input style={{width: "100%"}} /></Selector> <Selector><Block style={{width: "100px"}} /></Selector> <Selector><Block style={{width: "100%"}} /></Selector> </div> ); } EL PROBLEMA es cuando trato de establecer width:100% en el componente Block , por ejemplo. Quiero que Block se extienda por todo el ancho en .workspace , pero debido a que Block está en Selector , tendrá .container como padre, por lo que solo llenará ese elemento, no .workspace . Con esto, no puedo cumplir con el requisito 2).
Puede consultarlo aquí en Fiddle: https://jsfiddle.net/49cmok2a/2/ . Si establece el ancho en 100 px en Block, será un bloque con un ancho de 100 px, pero si coloca el 100 % de ancho, solo se reducirá a 1 px.
¿Sabe cómo crear Selector , por lo que no crea div principal en elementos? ¡Gracias!
Su problema es que está tratando de sobrescribir el estilo relativo en el niño. Puede controlar fácilmente el ancho de estilo de su Selector con solo 2 acciones:
En primer lugar, debe cambiar su max-width: object-fit, esta propiedad se usa principalmente para etiquetas img o video. Cambia su propiedad como lo hice yo
.container{ position: relative; max-width: 100%; cursor: pointer; }La próxima vez puede cambiar fácilmente el ancho de su Selector.
Espero haber respondido correctamente a su pregunta, ¡que tenga un buen día!
Si solo desea el cuadrado, puede usar 100vw en lugar de 100%:
const App = () => { return ( <div className="workspace"> <Selector><Input style={{width: "100%"}} /></Selector> <Selector><Block style={{width: "100vw"}} /></Selector> </div> ); }O haga que el .workspace sea el 100% de su padre, haga que el selector tome el 100% de su padre (.workspace) y haga que el Bloque o la Entrada tengan los tamaños que desea que sean:
<div className="workspace" style={{width: "100%"}} > <Selector style={{width: "100%"}} ><Input /></Selector> <Selector style={{width: "100%"}} ><Block/></Selector> </div>pero necesita que el ancho máximo sea del 100% en el archivo css.
max-width: 100%;