javascript - 如何在 React 应用程序中覆盖或取消容器的 CSS 填充

Question

我在我也在使用的 react-redux 应用程序中需要 CSS 方面的帮助，styled-components并向react-spring我的应用程序添加动画

我的整个容器都带有填充物，我需要添加应该在背景中显示的图像，如图所示，请参阅侧面的那些图像

但我的代码有 JSX-components/HTML 元素，如下所示：

<Container paddingTop={paddingTop}>
        <BGCircleDotRed>
          <img src="/images/bg_triangle_blue.png" alt=""/>
        </BGCircleDotRed>

    <BGSwooPink>
            <img src="/images/bg_swoo_pink.png" alt=""/>
          </BGSwooPink>
    ... // and other backgroun images components
</Container>

所以现在我该如何编写使这些背景图像的容器填充无效，然后在特定点添加它们，如图所示，每个图像组件的 css 如下：

export const BGCircleDotRed = styled.div`
  position: relative;
  height: auto;
  // padding-right: 9%;
  ${responsiveCSS({
    'width': { sm: 5, md: 10, suffix: '%'}
  })};
  z-index: -1;
  opacity: 0.2;
`;

• 请注意，responsiveCSS当站点在具有各种显示尺寸的设备上加载时，它是一个辅助函数。

所以我应该做些什么改变，作为参考，请看这张图片：https ://cdn.discordapp.com/attachments/238727603618447362/514687148197150720/Screen_Shot_2018-11-20_at_4.50.58_PM.png

标签： javascriptcssreactjsstyled-componentsreact-spring