嵌套组件会覆盖父组件的样式吗？

Question

我正在尝试在彩色背景中放置一个大白框，但是出现问题 我的嵌套组件似乎在向其父组件而不是仅在自身上应用边距。这是两个组件的代码：

Background.js：

const Background = styled.div`
    background: linear-gradient(
      to bottom right,
      ${props => props.theme.color_primary_light},
      ${props => props.theme.color_primary_dark});
    background-size: cover;
    background-repeat: no-repeat;
    /* text color for all children */
    color: ${props => props.theme.color_grey_dark_2};
    min-height: 100vh;
`;

Container.js：

const Container = styled.div`
  max-width: 120rem;
  background-color: ${props => props.theme.color_grey_light_1};
  box-shadow: ${props => props.theme.shadow_dark};
  min-height: 50rem;

  /*This margin seems to be applied to the parent*/
  margin: 8rem auto;
`;

这就是我从App.js主组件中调用它们的方式：

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Background>
        <Container>
        </Container>
      </Background>
    </ThemeProvider>
  );
}

现在这是我想要达到的效果。但是，我只能通过使用纯HTML和CSS来重新创建它，并且它可以像人们期望的那样工作。 Background和Container都是div，而Container是Background的直接子代。我正在应用的CSS与上面列出的样式化组件完全相同。

但是，我在样式化组件示例中真正得到的是以下内容：

这很难说，但是在顶部施加了8rem的边距，这是有效的 将 both 向下推，同时不只是将“容器”在背景内向下移动8rem。

我想知道是否有人知道为什么会这样，以及我应该寻找什么来解决此问题。我过去一个月只在练习CSS，所以这似乎是我似乎忽略的一个明显修复方法，但是我无法弄清楚。

Answer 1

好吧，我知道了。在Container.js中，我打算设置min-width属性，而不是'max-width'。这些简单的错误可能会很烦人。