Estoy tratando de crear un objeto para usarlo en el estilo en línea, pero no sé cómo escribir clamp y after de la manera correcta.
const PhoneInputStyle = { fontSize: clamp("13px", "1.111vw", "16px"), /*this is giving me trouble lineHeight: clamp("15px", "1.319vw", "19px"), */ position: "relative", width: "100%", height: "51px", cursor: "pointer", display: "flex", flexDirection: "row", alignItems: "center", padding: "8px 16px", border: "1px solid ${COLOR_NOT_BLACK}", boxSizing: "border-box", borderRadius: "10px", outline: "none", &:focus { /*this is giving me trouble border: "1px solid ${COLOR_SALMON} !important", } */ gridRowStart: "1", gridColumnStart: "1" } El error que recibo en la clamp es: Cannot find name 'clamp'
Lo que obtengo en el focus es: Expression expected (en el & )
Debe hacer que todo sea una cadena, por ejemplo {fontSize: "clamp(13px, 1.111vw, 16px)"}
Para el enfoque, creo que necesitará algo como: https://styled-components.com/
-editar-
Tal vez podría crear un componente contenedor en el que pueda configurar un controlador de eventos onHover.
Algo del estilo de...
<div style={isShown ? {border: "1px solid ${COLOR_SALMON}"}: ""} onMouseEnter={() => setIsShown(true)} onMouseLeave={() => setIsShown(false)} > {children} </div>Esto probablemente incluso funcionaría sin necesidad de configurar un componente contenedor.