不是样式组件的 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&nbsp;const AnimatedLoader = ({css={&nbsp; &nbsp; &nbsp; &nbsp; height: 45,&nbsp; &nbsp; &nbsp; &nbsp; width: 45&nbsp; &nbsp; &nbsp; }}) => {&nbsp; return (&nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; {...css}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <AnimatedIcon&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; css={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animationDelay: '0.7s',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 35,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 10,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: 'absolute',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 10,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 35&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp;// ....如果您需要做更复杂的事情，传入一个将不同样式选项描述为一个组的 prop 可能更明智。因此，isSmallSize作为布尔值或不同大小作为枚举等。然后在您的组件中根据道具调整样式。const AnimatedLoader = ({ isSmallSize = false }) => {&nbsp; &nbsp; const outerSize = isSmallSize ?&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{ height: 45, width: 45 } : { height: 1, width: 1 }&nbsp; &nbsp; const iconSize = isSmallSize ?&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{ height: 35, width: 35 } : { height: 1, width: 1 }&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp;<div css={{ ...outerSize }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<AnimatedIcon&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;css={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;animationDelay: '0.7s',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;left: 10,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;position: 'absolute',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;top: 10,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;...iconSize&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<AnimatedIcon&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;css={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;animationDelay: '0.7s',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;display: 'none',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;left: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;top: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;...iconSize&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;css={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;borderRadius: 20,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;borderStyle: 'solid',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;borderWidth: 3,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;position: 'absolute',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;...iconSize&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; </div>&nbsp; )}