Styling React.js Components

Question

So , I was working with a certain React.js project. The two problems that I'm always facing:
1. Components always stick to top having a width of 100% and height of possibly 5px (Regardless of size set by me). Components never utilize the whole screen.
2. Components are not responsive. (Regardless of meta viewport tags).
Can anyone help me with these problems ?
Any helps/suggestions will be appreciated.
Thanks in advance.

Answer 1

Hi, if you give 100% width to your component it takes 100% width of it's parent so make sure component's parents is also having 100% width this way your component will show in full screen.

Answer 2

Rizvan Kukad
An example could be:

class Bla extends React.Component{
render(){
return <div style={{background: red, width: 100%, height: 100%}}>Appropiate Example</div>;
}
}

In this case, I want to make the div utilize the full webpage. I will expect the whole page to be red. But still, even after setting body, html, or even "root" 's height and width to 100%, no luck.