如何在反应选择中删除输入标签上的轮廓和框阴影答案

【问题标题】：how to remove the outline and box shadow on input tag in react-select如何在反应选择中删除输入标签上的轮廓和框阴影
【发布时间】：2021-10-05 23:29:45
【问题描述】：

我想在输入标签处于活动状态时移除蓝色轮廓和框阴影。

【问题讨论】：

“蓝色轮廓”是指光标吗？
黑色光标在蓝色轮廓框内

标签： reactjs react-select

【解决方案1】：

您需要传递自定义样式属性。

类似的东西

const customStyles = {
    control: (base, state) => ({
      ...base,
      height: "100%",
      minHeight: "100%",
      border: 0,
      boxShadow: "none",
    }),
    dropdownIndicator: (base, state) => {
      return {
        ...base,
      };
    },
    placeholder: (base, state) => ({
      ...base,
    }),
    singleValue: (base, state) => ({
      ...base,
    }),
    option: (base, state) => ({
      ...base,
    }),
  };


return (
  <Select 
   //REST OF YOUR PROPS
   styles={customStyles}
   isSearchable={false}   //This gets rid of the default cursor
  /> 
)

尝试使用 customStyles 对象来进一步设置它的样式:)

【讨论】：

我这样做了，但我们没有输入标签的任何键
在代码沙箱中创建一个最小可重现问题，我会为你编辑它:)

【解决方案2】：

默认样式派生自主题对象，您可以像样式一样对其进行变异。

主题对象也可用于样式功能。

    <Select
        label="Single select"
        options={user}
        theme={theme => ({
          ...theme,
          borderRadius: 'none',
          colors: {
            ...theme.colors,
            primary25: 'primary',
            primary: 'neutral5',
          },
        })}
      />

【讨论】：

【解决方案3】：

常量样式 = { 控制：基地=>（{ ...根据，边界：0， boxShadow：'无' }) };

【讨论】：