使用clamp和focus创建React CSS对象

Question

我正在尝试创建一个对象，以便在内联样式中使用它，但是我不知道如何正确地编写clamp和after。

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"
}

我在clamp上得到的错误是：Cannot find name 'clamp'

我在focus上得到的是：Expression expected (在&上)

Answer 1

您需要将整个内容设置为字符串，例如{fontSize: "clamp(13px, 1.111vw, 16px)"}

为了获得焦点，我认为您需要类似以下内容：https://styled-components.com/

-编辑-

也许您可以创建一个包装器组件，以便在其上设置onHover事件处理程序。

类似于……的东西

<div
  style={isShown ? {border: "1px solid ${COLOR_SALMON}"}: ""}
  onMouseEnter={() => setIsShown(true)} 
  onMouseLeave={() => setIsShown(false)}
>
  {children}
</div>

这甚至可以在不需要设置包装器组件的情况下工作。