title: ReactJs & Styled components, Can't type anything in the input field
body: <p>I'm working on personal project using ReactJs &amp; styled Components.</p>
  <p>I started to move all old css code to use styled-components instead, however I applied it on the Inputs as well, but now it stopped working and I can't type anything in these inputs.</p>
  <p>I tried to search and read Styled-components Docs again, but alas couldn't find anything that can solve the issue</p>
  <p>any help would be appreciated</p>
  <pre><code>import React, { Component } from 'react';
  import Info from '@material-ui/icons/Info'
  import Constants from '../../constants/Constants'
  import {bindActionCreators} from 'redux'
  import * as actions from '../../redux/actions/actionCreators.js';
  import {connect} from 'react-redux'
  import {Redirect} from 'react-router-dom'
  import styled from 'styled-components'
  
  class Login extends Component {
    constructor(props) {
      super(props)
      this.handleUsernameInput = this.handleUsernameInput.bind(this)
      this.handlePasswordInput = this.handlePasswordInput.bind(this)
      this.state = {
        username: null,
        password: null,
        validationErrorExsist: false,
        validationErrorText: null,
        isAuthenticated: this.props.isAuth
      }
    }
  
    GetErrorText = () =&gt; {
      //  username field is empty
      if(this.state.username == null) this.setState({ validationErrorText: Constants.VALIDATION_TEXT.EMPTY_USERNAME_FEILD })
      //  password field is empty
      else if(this.state.password == null) this.setState({ validationErrorText: Constants.VALIDATION_TEXT.EMPTY_PASSOWRD_FEILD })
    }
  
    handleUsernameInput = (event) =&gt; {
      this.setState({username: event.target.value})
    }
    
    handlePasswordInput = (event) =&gt; {
      this.setState({password: event.target.value})
    }
  
    login = () =&gt; {
      if((this.state.username == null || this.state.password == null)) {
        this.setState({validationErrorExsist: true}, () =&gt; {
          return this.GetErrorText()
        })
      }
      else {
        return this.props.loginUser(this.state.username, this.state.password)
      }
    }
  
    render() { 
  
      /** Login Styles Go Here */
      const LoginContainer = styled.div`
        padding: 10px;
        margin: 40px auto;
        width: 80%;
      `
  
      const LoginText = styled.div`
        font-size: 1.5em;
        font-weight: 600;
        margin-bottom: 20px;
      `
  
      const NoticeText = styled.div`
        line-height: 20px;
        margin-bottom: 16px;
      `
  
      const LoginButtonContainer = styled.div`
        display: flex;
        justify-content: flex-star;
        margin-top: 18px;
      `
  
      const LoginButton = styled.div`
        border-color: #01b4e4;
        background-color: #01b4e4;
        color: #fff;
        padding: .675rem .95rem;
        border-radius: 5px;
        font-weight: bold;
        border-radius: 14px;
        &amp;:hover {
          cursor: pointer;
        }
      `
  
      const CreateNewAccountLink = styled.a`
        color: #00c6ff;
      `
  
      const LabelName = styled.div`
        font-weight: bold;
        margin-top: 15px;
      `
  
      const InputForm = styled.div`
        display: flex;
        flex-direction: column;
      `
  
      const StyledInput = styled.input`
        margin-top: 10px;
        border-color: rgba(33,37,41,0.15);
        color: #292b2c;
        padding: 12px;
        border-radius: .25rem;
        line-height: 1.5;
        vertical-align: middle;
        &amp;:focus {
          outline: none
        }
      `
  
      const ErrorCardContainer = styled.div`
        margin: 20px 0 10px 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        border-radius: 8px;
        border: 1px solid #ccc;
      `
  
      const ErrorCardHeader = styled.div`
        background-color: #d53540;
        color: #fff;
        display: flex;
        padding: 20px;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
      `
  
      const ErrorText = styled.div`
        font-weight: 600;
        font-size: 1.2em;
        line-height: 1.2em;
        margin-left: 5px;
      `
  
      const ErrorTypeContainer = styled.div`
        padding: 5px;
      `
  
      const StyledUnorderedList = styled.ul`
        line-height: 1.4;
      `
  
      if(this.state.isAuthenticated) return &lt;Redirect to='/' /&gt;
          
      const {validationErrorExsist} = this.state
  
      const ErrorStatusCard = () =&gt; (
        &lt;ErrorCardContainer&gt;
          &lt;ErrorCardHeader&gt;
            &lt;Info /&gt;
            &lt;ErrorText&gt;There was a problem!&lt;/ErrorText&gt;
          &lt;/ErrorCardHeader&gt;
          &lt;ErrorTypeContainer&gt;
            &lt;StyledUnorderedList&gt;
              &lt;li&gt;{this.state.validationErrorText}&lt;/li&gt;
              {/* TODO: login attemps */}
              {/* &lt;li&gt;You have 10 remaining login attempts.&lt;/li&gt; */}
            &lt;/StyledUnorderedList&gt;
          &lt;/ErrorTypeContainer&gt;
        &lt;/ErrorCardContainer&gt;
      )
  
      return ( 
        &lt;LoginContainer&gt;
  
          &lt;LoginText&gt;Login to your account&lt;/LoginText&gt;
          &lt;NoticeText&gt;
            This app gets its data from the TMDD APIs. To view your account information, login with your TMDb credentials in the form below. To create one, 
             &lt;CreateNewAccountLink href=&quot;https://www.themoviedb.org/signup&quot; target=&quot;_blank&quot;&gt; Click here&lt;/CreateNewAccountLink&gt;
          &lt;/NoticeText&gt;
  
          {validationErrorExsist &amp;&amp; &lt;ErrorStatusCard /&gt;}
  
          &lt;InputForm&gt;
            &lt;LabelName&gt;Username&lt;/LabelName&gt;
            &lt;StyledInput onChange={this.handleUsernameInput} type=&quot;text&quot;/&gt;
          &lt;/InputForm&gt;
  
          &lt;InputForm&gt;
            &lt;LabelName&gt;Password&lt;/LabelName&gt;
            &lt;StyledInput onChange={this.handlePasswordInput} type=&quot;password&quot;/&gt;
          &lt;/InputForm&gt;
  
          &lt;LoginButtonContainer&gt;
            {/* &lt;div className=&quot;login-btn&quot; onClick={this.login}&gt;Login&lt;/div&gt; */}
            &lt;LoginButton onClick={this.login}&gt;Login&lt;/LoginButton&gt;
          &lt;/LoginButtonContainer&gt;
  
        &lt;/LoginContainer&gt; 
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; { 
    return {
      isAuth: state.isAuth,
    }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return bindActionCreators(actions, dispatch)
  }
   
  export default connect(mapStateToProps, mapDispatchToProps)(Login);
  
  </code></pre>