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

如何在React应用中覆盖或使Container的CSS填充无效

0 个答案: