Can't change body height reactJS - reactjs

Question

I'm discovering ReactJS, trying some stuff but i face a problem: my body height is fixed to 76px and i can't do anything to that, i tried a lot a stuff, nothing worked.
Here's the code i'm using
import * as React from 'react';
// This fonction make the color change on the button on the first click
function ChangeStyle() {
var elem = document.getElementById('Button1');
if (elem == null) {
return;
}
elem.style.background = '#ff4848';
}
// Main Class
export class Button extends React.Component {
render() {
// Style sheet of the Button
var buttonStyle = {
fontSize: 50,
background: '#ffb516',
color : '#FFFFFF',
width: 500,
border: 'none',
textAlign: 'center',
display: 'block',
margin: 'auto'
};
// Set the Background color
document.body.style.backgroundColor = '#25353f';
document.body.style.position = 'relative';
document.body.style.height = '100%';
// Try to make the button in center
/*
var centerDiv = {
position: 'absolute' as 'absolute',
top: '50%',
left: '30%',
margin: 'auto'
}
*/
// Test on linearGradient
/*
function degraded() {
<svg width='15' height='71' fill='url(#Gradient-1)'>
<defs>
<linearGradient id='Gradient-1' x2='0%' y2='100%'>
<stop offset='0%' stop-color='#25353f'/>
<stop offset='100%' stop-color='#5b6c72'/>
</linearGradient>
</defs>
</svg>
}
*/
// Create the button
return (
<div id="fullHeight" style={{height: '100%'}}>
<div /*style={centerDiv}*/>
<button
id="Button1"
style={buttonStyle}
onClick={() => ChangeStyle()}
>
Pushtalents
</button>
</div>
</div>
);
}
}
export default Button;
Any idea why? And how to fix this problem?

Answer 1

Maybe it helps if you remove position: relative; from body. It doesn't do anything anyways. Other than that you can try to set the body height to 100vh.