不是样式组件的 React 样式可重用组件

Question

我有一个可重用的组件，其中包含一个名为 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 组件内更改大小。

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

        }}

     // ....

如果您需要做更复杂的事情，传入一个将不同样式选项描述为一个组的 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>

  )

}