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

Question

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

您第一个问题的官方答案是创建自定义样式并覆盖原生 react-select 样式，如下所示：

(I think you have to override valueContainer, but I leave you other props you can play with)

const AutocompleteStyles = {
    control: (defaultStyles: any) => ({
      ...defaultStyles,
      padding: '0',
    }),
    option: (defaultStyles: any, state: any) => ({
      ...defaultStyles,
      backgroundColor: 'black',
      '&:hover': {
        backgroundColor: '#dcdcdc4c',
      },
    }),
    singleValue: (defaultStyles: any) => ({
      ...defaultStyles,
      padding: '0',
    }),
    valueContainer: (defaultStyles: any) => {
      return {
        ...defaultStyles,
        padding: '0',
      };
    },
    placeholder: (defaultStyles: any) => {
      return {
        ...defaultStyles,
        padding: '0',
      };
    },
    dropdownIndicator: (defaultStyles: any, state: any) => {
      return {
        ...defaultStyles,
        padding: '0',
      };
    },
    indicatorSeparator: (defaultStyles: any) => {
      return {
        ...defaultStyles,
        display: 'none',
      };
    },
  };

然后，将这些样式分配给您的 react-select 组件，如下所示：

<Select
        ...
        styles={PeyaAutocompleteStyles}
      />

如你所见，你可以在方法中接收两个道具，第一个是默认样式，第二个是 react-select 状态，如果你想根据组件状态处理样式（就像您有一个选定的值或为空）。

有关详细信息，您可以查看 react-select 样式组件： https://react-select.com/styles

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

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

css

reactjs

react-select