React component stops working when I add css to it - css

Question

I have a component that has a state "style" which changes to a random color in my colors array whenever a button is clicked. The state is passed inside a style attribute so that the backgroundColor would become whatever the state is. This is working but whenever I try to add css to the button, it stops working as intended. I have a hunch that it could be due to the position absolute that I used but I have no idea why it's doing that.
All I could do was comment out the CSS to make the button work again but that really doesn't solve my issue.
import React, {Component} from 'react';
import "./Tap.css";
class Tap extends Component{
constructor(props){
super();
this.state={
style: ''
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
const colors = ["#68ad45", "#123456", "#987546", "#ab23c6", "#324517", "#456819"];
let i = Math.floor(Math.random() * 6);
this.setState({
style: colors[i]
});
}
render(){
return(
<div className="Tap" style={{backgroundColor: this.state.style}}>
<button onClick={this.handleClick}>Click Here</button>
</div>
);
}
}
export default Tap;
// ========================== CSS file ==========================
.Tap button{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: none;
outline: none;
padding: 10px;
font-size: 200px;
cursor: pointer;
}
No error messages, just no result coming from the button after it's been styled with the css.

Answer 1

This is because: position: absolute which is added to button,
So Tab div have no height now
One solution: is to div that div fixed height:
.Tap {
height: 50px;
}
See Example 1
But if you noticed that the tab not aligned with button because of absolute position.
Other Solution position the Tab not the button as absolute with some padding:
See example 2

Answer 2

Just do this simple change <button onClick={this.handleClick} style={{backgroundColor: this.state.style}}>Click Here</button>
check sample code - https://stackblitz.com/edit/react-soy8a4