Я пытаюсь разместить большую белую рамку на цветном фоне, но у меня проблема, связанная с тем, что мой вложенный компонент, похоже, применяет поле для своего родительского компонента, а не только для самого себя. Вот код для двух компонентов:
Фон. 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;
`;
Контейнер. 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;
`;
И вот как я Я звоню им из основного приложения. js компонент:
const App = () => {
return (
<ThemeProvider theme={theme}>
<Background>
<Container>
</Container>
</Background>
</ThemeProvider>
);
}
Теперь я пытаюсь добиться этого эффекта. Однако мне удалось воссоздать это только с использованием чистых HTML и CSS, и это работает, как и следовало ожидать. Background и Container являются divами, а Container является прямым потомком Background. CSS, который я применяю, точно такой же, как у стилевых компонентов, которые я перечислил выше.
Однако, что я на самом деле получаю в примере с установленными компонентами, так это:
Это немного сложно сказать, но к вершине применено поле в 8рем, которое эффективно толкает оба компонентов фона и контейнера вместо того, чтобы просто перемещать контейнер вниз на 8rem в фоновом режиме.
Интересно, кто-нибудь знает, почему это так, и что я должен искать, чтобы это исправить. Я только практиковал CSS в течение последнего месяца, так что это может быть очевидным исправлением, которое я, кажется, упускаю из виду, однако я просто не могу понять это.