Creating a React CSS object with clamp and focus-CodePudding

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 &)

CodePudding user response：

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}"}: ""}
  onm ouseEnter={() => setIsShown(true)} 
  onm ouseLeave={() => setIsShown(false)}
>
  {children}
</div>

This would probably even work without needing to set a wrapper component.