在這里，我將動態樣式添加到我的自定義樣式組件中。
<A
href={link || undefined}
style={{ pointerEvents: `${disabled ? 'none' : 'all'}` }}
>
當我簡單地使用style={{ pointerEvents: 'none' }}它時，它作業正常。但試圖使動態，然后我得到以下錯誤：
[!]（插件 rpt2）錯誤：C:/Users/src/Wizard/Wizard-v2/WizardStep.tsx(232,16)：語意錯誤 TS2769：沒有多載匹配此呼叫。多載 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>, "slot" | ... 262 more ... | "referrerPolicy"> & { ...; }, "slot" | ... 263 更多 ... | "referrerPolicy"> & Partial<...>, "slot" | ... 263 更多 ... | "referrerPolicy"> & { ...; } & { .. .; }): ReactElement<...>'，給出了以下錯誤。型別“字串”不可分配給型別“填充”| “中風” | “無” | “汽車” | “繼承” | “初始” | “全部” | “-moz-initial” | “還原” | “未設定” | " | "可見填充" | “看得見的畫” | “可見中風” | 不明確的'。多載 2 of 2, '(props: StyledComponentPropsWithAs<"a", any, {}, never>): ReactElement<StyledComponentPropsWithAs<"a", any, {}, never>, string | ... 1 更多 ... | (new (props: any) => Component<...>)>'，給出了以下錯誤。型別“字串”不可分配給型別“填充”| “中風” | “無” | “汽車” | “繼承” | “初始” | “全部” | “-moz-initial” | “還原” | “未設定” | “畫” | "可見" | "可見填充" | “看得見的畫” | “可見中風” | 不明確的'。| "可見填充" | “看得見的畫” | “可見中風” | 不明確的'。多載 2 of 2, '(props: StyledComponentPropsWithAs<"a", any, {}, never>): ReactElement<StyledComponentPropsWithAs<"a", any, {}, never>, string | ... 1 更多 ... | (new (props: any) => Component<...>)>'，給出了以下錯誤。型別“字串”不可分配給型別“填充”| “中風” | “無” | “汽車” | “繼承” | “初始” | “全部” | “-moz-initial” | “還原” | “未設定” | “畫” | "可見" | "可見填充" | “看得見的畫” | “可見中風” | 不明確的'。ReactElement<StyledComponentPropsWithAs<"a", any, {}, never>, string | ... 1 更多 ... | (new (props: any) => Component<...>)>'，給出了以下錯誤。型別“字串”不可分配給型別“填充”| “中風” | “無” | “汽車” | “繼承” | “初始” | “全部” | “-moz-initial” | “還原” | “未設定” | “畫” | "可見" | "可見填充" | “看得見的畫” | “可見中風” | 不明確的'。ReactElement<StyledComponentPropsWithAs<"a", any, {}, never>, string | ... 1 更多 ... | (new (props: any) => Component<...>)>'，給出了以下錯誤。型別“字串”不可分配給型別“填充”| “中風” | “無” | “汽車” | “繼承” | “初始” | “全部” | “-moz-initial” | “還原” | “未設定” | “畫” | "可見" | "可見填充" | “看得見的畫” | “可見中風” | 不明確的'。
這有什么問題？
uj5u.com熱心網友回復：
你不需要模板字串，就這樣寫。
pointerEvents: disabled ? 'none' : 'all'
uj5u.com熱心網友回復：
style={{ pointerEvents: disabled ? 'none' : 'all' }}
Styled-components 有另一種使用 props 進行樣式設定的方法，這可能很值得了解。https://styled-components.com/docs/basics#passed-props
uj5u.com熱心網友回復：
嘗試這個
<A
href={link || undefined}
style={{ pointerEvents: disabled ? 'none' : 'all' }}
>
uj5u.com熱心網友回復：
嘗試這個
<A
href={link || undefined}
style={{ pointerEvents: disabled ? 'none' : 'all'} }}
>在 reactJS 中，您不必將變數放在文字字串中
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/493202.html
標籤：javascript 反应 样式化组件