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

Question

我有一個可重用的組件，其中包含一個名為AnimationLoader的動畫。 該組件是用於加載狀態的可重用組件。 我只是試圖將這個組件帶到另一個組件UnpublishBlogBtn中，並在單擊按鈕后將其用作加載器-一切正常。 但是，我想更改UnpublishBlogBtn內部動畫的高度和寬度，並且無法一生都能夠正常工作。

我嘗試實現Object.assign來從另一個文件引入CSS並只是更改高度和寬度。 我還嘗試過通過執行<style={{}}>來更改CSS，以及將組件包裝在已添加樣式的div中（這似乎只是更改按鈕，而不是動畫本身）。

<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組件中更改大小。

Answer 1

您可以將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
        }}
     // ....

如果您需要做更復雜的事情，則最好傳入一個將不同樣式選項作為一組描述的道具。 所以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>
  )
}