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

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

不是樣式組件的 React 樣式可重用組件

不是樣式組件的 React 樣式可重用組件

瀟湘沐 2021-10-21 15:04:31
我有一個可重用的組件,其中包含一個名為 AnimationLoader 的動畫。該組件是用于加載狀態的可重用組件。我只是想獲取這個組件并在另一個組件中使用它,UnpublishBlogBtn 作為單擊按鈕后的加載程序 - 一切正常。但是,我想更改 UnpublishBlogBtn 中動畫的高度和寬度,但我一生都無法使其正常工作。我已經嘗試實現 Object.assign 以從另一個文件中引入 CSS 并更改高度和寬度。我還嘗試通過<style={{}}>將組件包裝在添加了樣式的 div 中來更改 CSS (這似乎只是更改按鈕而不是動畫本身)。<Button type="main" className="blogBtn">   {currentlyUnpublishingBlog ? <AnimatedLoader css={{ height: 1, width: 1 }}/> :    'Unpublish Blog'}</Button>const AnimatedLoader = () => {  return (    <div      css={{        height: 45,        width: 45      }}    >      <AnimatedIcon         css={{          animationDelay: '0.7s',          height: 35,          left: 10,          position: 'absolute',          top: 10,          width: 35        }}      />      <AnimatedIcon         css={{          animationDelay: '0.7s'          display: 'none',          height: 45,          left: 0,          top: 0,          width: 45,        }}      />      <div        css={{          borderRadius: 20,          borderStyle: 'solid',          borderWidth: 3,          height: 45,          position: 'absolute',          width: 45,        }}      />    </div>  )};export default AnimatedLoader;用戶單擊取消發布博客按鈕后,加載程序應在按鈕頂部顯示較小的寬度和高度。目前,它保持與 AnimatedLoader 組件內列出的大小相同的大小,我希望在 UnpublishBlogBtn 組件內更改大小。
查看完整描述

1 回答

?
有只小跳蛙

TA貢獻1824條經驗 獲得超8個贊

您可以將您的css輸入作為道具傳遞給您的AnimatedLoader


 const AnimatedLoader = ({css={

        height: 45,

        width: 45

      }}) => {

  return (

    <div

      {...css}

    >

      <AnimatedIcon 

        css={{

          animationDelay: '0.7s',

          height: 35,

          left: 10,

          position: 'absolute',

          top: 10,

          width: 35

        }}

     // ....

如果您需要做更復雜的事情,傳入一個將不同樣式選項描述為一個組的 prop 可能更明智。因此,isSmallSize作為布爾值或不同大小作為枚舉等。


然后在您的組件中根據道具調整樣式。


const AnimatedLoader = ({ isSmallSize = false }) => {

    const outerSize = isSmallSize ? 

                       { height: 45, width: 45 } : { height: 1, width: 1 }

    const iconSize = isSmallSize ? 

                       { height: 35, width: 35 } : { height: 1, width: 1 }

    return (

       <div css={{ ...outerSize }}>

         <AnimatedIcon

           css={{

             animationDelay: '0.7s',

             left: 10,

             position: 'absolute',

             top: 10,

             ...iconSize

           }}

         />

         <AnimatedIcon

           css={{

             animationDelay: '0.7s',

             display: 'none',

             left: 0,

             top: 0,

             ...iconSize

           }}

         />

         <div

           css={{

             borderRadius: 20,

             borderStyle: 'solid',

             borderWidth: 3,

             position: 'absolute',

             ...iconSize

           }}

      />

    </div>

  )

}



查看完整回答
反對 回復 2021-10-21
  • 1 回答
  • 0 關注
  • 206 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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