react-select: Overwrite default styles and remove the clearable 'x' icon

Question

Thank you for opening this question. I implemented the react-select.

            <Select
              searchable
              clearable
              name="form-field-name"
              options={options}
              value={this.state.value}
              onChange={this.onChange}
            /> 

When changed the page to RTL, I had some space (padding-right) at the beginning of the selected option. The screenshot attached clarifies that. I tried to add

.has-value.is-clearable.Select--single > .Select-control .Select-value { padding-right: 10px; }

to my own CSS but that didn't work out. please help me fix it.

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 searchable 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.

Answer 1

I am not sure about your first question.

To remove 'x' set the isClearable props to false.

<Select
  searchable
  isClearable={false}
  name="form-field-name"
  options={options}
  value={this.state.value}
  onChange={this.onChange}
/>