Использование стилизованных компонентов не может получить весь фон определенного цвета - PullRequest
Новая
       22

Использование стилизованных компонентов не может получить весь фон определенного цвета

1 голос
/ 05 мая 2020

Так что я уверен, что это что-то очень простое, но я не могу заставить фон покрыть весь фон, вот и все. Я говорю просто, но я предоставлю код, который я использовал.

Обычно только четверть верхней части экрана черная в основном, если у меня есть только что-то обернутое в компонент.

Главная . js - 

import React from 'react'
import styled from "styled-components";
import Background from './images/Cryptid.png'

const Home = () => {

    return (

        <Container>
            <InnerContainer>
                <Logo />
                <JoinInfo><p>test</p></JoinInfo>
            </InnerContainer>
        </Container>
    )


}

const Container = styled.div`
display: flex;
height: 100%;
width: 100%;
background: black;
background-size: cover;
`;

const InnerContainer = styled.div`
height: 100%;
width: 100%;

`;

const Logo = styled.div`
border: 1px solid red;
margin: auto;
padding: auto;
height: 100px;
width: 400px;
background-image: url(${Background});
    `

const JoinInfo = styled.section`
color: white;
`
export default Home;

1 Ответ

1 голос
/ 05 мая 2020

Вы можете добавить цвет фона к элементу html body, тогда он будет покрывать весь экран: 

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    background: black;
  }
`

const <Home> = () => 
  <GlobalStyle />
  <Navigation /> {/* example of other top-level stuff */}
</Home>
...