reactjs 如何在react-select中删除input标签上的轮廓和框阴影

utugiqy6  于 2023-05-06  发布在  React
关注(0)|答案(6)|浏览(139)

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

qfe3c7zg

qfe3c7zg1#

盒子阴影由@tailwindcss/forms插件引入。表单插件的默认策略是在表单元素上全局应用样式。
您可以通过在tailwind.config.js文件中为插件指定不同的策略来更改此设置。

plugins: [
  ...
  require('@tailwindcss/forms')({
    strategy: 'class',
  }),
]

但是现在你必须在所有你想用@tailwindcss/forms插件样式化的表单元素上应用form-[inputType]类。
这里有更多关于这个:https://github.com/tailwindlabs/tailwindcss-forms#using-only-global-styles-or-only-classes

ie3xauqp

ie3xauqp2#

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

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对象进一步设置样式:)

3phpmpom

3phpmpom3#

默认样式派生自主题对象,您可以像样式一样更改该主题对象。
主题对象也可用于样式函数。

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

bt1cpqcv4#

const style = { control:base =〉({ ...base,border:0,boxShadow:“})};

9w11ddsr

9w11ddsr5#

老问题,但蓝色的轮廓是一个下拉阴影的输入字段本身(至少是在我的情况下),我结束了只是添加一个自定义类的选择领域一样

<ReactSelect
    title = { __( 'Title', 'lang' ) }
    className = { 'your-custom-class' }
...

然后用

.your-custom-class input {
    box-shadow: none;
}
uujelgoq

uujelgoq6#

Akshay Kumar的awnser的另一种方法对我有效(顺风):

input[id^="react-select-"] {
  @apply focus:outline-none focus:border-transparent focus:ring-0;
}

相关问题