title: Target native dom element <input>...</input> with styled-components
body: <p>I am having trouble getting my styled component to make a change to an <code>&lt;input /&gt;</code> wrapped in a React component. In Dev Tools I can see the style I am trying to override here: </p>
  
  <pre><code>.ui.input input {...}
  </code></pre>
  
  <p>I think the wrapping component needs to pass <code>className</code> to input i.e </p>
  
  <pre><code>&lt;input className = {this.props.className} ..&gt; ... &lt;/input&gt;
  </code></pre>
  
  <p>but I cannot get the style to override with or without that. I will provide some snippets below. </p>
  
  <pre><code>//styled component
  const StyledSearch = styled(Searchbar)`
    &amp;.ui.input input{
      border: 0px !important;
    }
  `;
  
  
  class SearchBar extends Component {
  ...
  render() {
  const style = {
    display: this.state.showResults ? 'block' : 'none',
    maxHeight: 500,
    overflowY: 'scroll',
  };
  return (
    &lt;div className="ui search fluid" ref="container"&gt;
      &lt;div
        className={`ui icon fluid input ${this.props.loading ? 'loading' : ''}`}&gt;
        &lt;input type="text"
          placeholder={this.props.placeholder}
          onFocus={this.focus}
          className = {this.props.className}
          value={this.props.value}
          onChange={this.props.onChange}/&gt;
        &lt;i className="search icon"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div
        className="results"
        style={style}&gt;
  
        {
          this.props.results.map((result, index) =&gt; (
              &lt;a
                className="result"
                key={index}
                onClick={this.select.bind(this, result)}&gt;
                &lt;div className="content"&gt;
                  {
                    result.get('image') ?
                    (
                      &lt;div className="image"&gt;
                        &lt;img src={result.get('image')} style={{ maxWidth: 50 }}/&gt;
                      &lt;/div&gt;
                    ) : null
                  }
                  &lt;div className="title"&gt;
                    {result.get('title')}
                  &lt;/div&gt;
                  &lt;div className="description"&gt;
                    {result.get('description')}
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/a&gt;
            )
          )
        }
      &lt;/div&gt;
    &lt;/div&gt;
  );}}
  </code></pre>