我正在嘗試創建一個物件以行內樣式使用它，但我不知道如何撰寫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在&）
uj5u.com熱心網友回復：
你需要把整個事情變成一個字串，例如 {fontSize: "clamp(13px, 1.111vw, 16px)"}
對于重點，我認為您需要以下內容：https : //styled-components.com/
-編輯-
也許您可以創建一個包裝器組件，您可以在其上設定 onHover 事件處理程式。
類似的東西...
<div
style={isShown ? {border: "1px solid ${COLOR_SALMON}"}: ""}
onm ouseEnter={() => setIsShown(true)}
onm ouseLeave={() => setIsShown(false)}
>
{children}
</div>
這甚至可能不需要設定包裝器組件就可以作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/352585.html
標籤：javascript html css 反应