title: React component stops working when I add css to it
body: <p>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.</p>
  
  <p>All I could do was comment out the CSS to make the button work again but that really doesn't solve my issue.</p>
  
  <pre><code>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(
        &lt;div className="Tap" style={{backgroundColor: this.state.style}}&gt;
            &lt;button onClick={this.handleClick}&gt;Click Here&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  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;
  }
  </code></pre>
  
  <p>No error messages, just no result coming from the button after it's been styled with the css.</p>