How to create a global container in react?

Question

I am just starting to learn React, and I would like to know how do you create a global layout container and a global content container. Here is what I am trying to achieve using CSS. BUT I am confused about how to achieve this with React. Would be great for any advice/links to tutorials etc... thanks.

.global-container {
    width: 100vw;
    height: 100vh;
}

.global-content {
    width: 90%;
    height: 100%;
    margin: 0 auto;
}

Answer 1

Since, you have tagged styled-components I'm assuming you're using it too!

//GlobalContainer.js

import styled from 'styled-components';

const Wrapper = styled.div`
  width: 100vw;
  height: 100vh;
`

export default function GlobalContainer({ children }) {
  return (
    <Wrapper>
      {children}
    </Wrapper>
  );
}

// GlobalContent.js

import styled from 'styled-components';

const Wrapper = styled.div`
  width: 90%;
  height: 100%;
  margin: 0 auto;
`

export default function GlobalContent({ children }) {
  return (
    <Wrapper>
      {children}
    </Wrapper>
  );
}