css - react-select:覆盖默认样式并删除可清除的 'x' 图标

Question

感谢您提出这个问题。我实现了 react-select .

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

当将页面更改为 RTL 时，我在所选选项的开头有一些空间 (padding-right)。随附的屏幕截图说明了这一点。我尝试添加

.has-value.is-clearable.Select--single > .Select-control .Select-value {
向右填充:10px；
}

我自己的 CSS，但没有成功。请帮我解决它。

另一个问题，清除文本的'x' 我找不到删除它的方法，问题是它既不清除文本也不能删除它。我使用了有/没有 searchable 属性的两种方式。此外，它在单击时会生成错误，因为返回了空值(我使用控制台解决了这个问题)。请查看以下屏幕截图。

Answer 1

我不确定你的第一个问题。

要删除 'x'，请将 isClearable 属性设置为 false。

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