I'm trying to create an object to use it in inline style but I don't know how to how to write clamp and after the right way.
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"
}
The error I get on clamp is : Cannot find name 'clamp'
What I get on focus is : Expression expected (on the &)
You need to make the whole thing a string e.g. {fontSize: "clamp(13px, 1.111vw, 16px)"}
For the focus, I think you'll need something like: https://styled-components.com/
-edit-
Perhaps you could create a wrapper component that you can set an onHover event handler on.
Something along the lines of...
<div
style={isShown ? {border: "1px solid ${COLOR_SALMON}"}: ""}
onMouseEnter={() => setIsShown(true)}
onMouseLeave={() => setIsShown(false)}
>
{children}
</div>
This would probably even work without needing to set a wrapper component.