亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

樣式化組件在樣式化對象中使用函數

樣式化組件在樣式化對象中使用函數

瀟瀟雨雨 2022-06-09 17:14:34
找不到一個清晰的例子,如何在 .css 對象中使用函數styled-components。它不會引發錯誤,但在提取道具時不會將背景添加到 CSS 輸出中,如下例所示。// Simple color functionconst color = (error) => { if (error) {   return 'red' } return 'black',}作品- cssconst StyledInput = styled.input<InputProps>`  background: ${({ error }) => color(error)};`;工作- css 對象const StyledInput = styled.input<InputProps>(props => ({  background: color(), // !!! NEED error from props}));不工作- css 對象const StyledInput = styled.input<InputProps>(props => ({  background: `${({ error }) => color(error)}`,}));
查看完整描述

1 回答

?
慕妹3146593

TA貢獻1820條經驗 獲得超9個贊

要解決道具提取問題,您應該能夠這樣做:


// Simple color function

const color = (error) => {

  if (error) {

    return 'red';

  }

  return 'black';

};


const StyledInput = styled.input<InputProps>(({ error, ...props }) => ({

  background: color(error),

}));


查看完整回答
反對 回復 2022-06-09
  • 1 回答
  • 0 關注
  • 149 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號