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>
  )
}