title: react-select: Overwrite default styles and remove the clearable 'x' icon
body: <p>Thank you for opening this question. I implemented the <a href="https://github.com/JedWatson/react-select" rel="nofollow noreferrer">react-select</a>. </p>
  
  <pre><code>            &lt;Select
                searchable
                clearable
                name="form-field-name"
                options={options}
                value={this.state.value}
                onChange={this.onChange}
              /&gt; 
  </code></pre>
  
  <p>When changed the page to <code>RTL</code>, I had some space (<code>padding-right</code>) at the beginning of the selected option. The screenshot attached clarifies that. I tried to add </p>
  
  <p><code>.has-value.is-clearable.Select--single &gt; .Select-control .Select-value {
      padding-right: 10px;
  }</code></p>
  
  <p>to my own CSS but that didn't work out. please help me fix it. </p>
  
  <p>Another problem, the 'x' that clears the text I couldn't find a way to remove it, the problem is that it neither clears the text nor it could be removed. I used both ways with/without <code>searchable</code> property. Also, it generates an error when clicked because null value returned (I figured that out using console). Please take a look at the following screenshot.</p>
  
  <p><a href="https://i.stack.imgur.com/u9Js5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u9Js5.png" alt="enter image description here"></a></p>