How to create a global container in react? - css

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>
);
}

Answer 2

In the App.js put a div for your global container and content just as you would in HTML. Note that you have to use className instead of class to give your jsx a css class.
import "./Styles/index.css"
function App() {
return (
<div className="global-container">
<div className="global-content">
{// Your app goes here
}
</div>
</div>
);