我想在输入标记处于活动状态时删除蓝色轮廓和方框阴影。
qfe3c7zg1#
盒子阴影由@tailwindcss/forms插件引入。表单插件的默认策略是在表单元素上全局应用样式。您可以通过在tailwind.config.js文件中为插件指定不同的策略来更改此设置。
@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
form-[inputType]
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对象进一步设置样式:)
customStyles
3phpmpom3#
默认样式派生自主题对象,您可以像样式一样更改该主题对象。主题对象也可用于样式函数。
<Select label="Single select" options={user} theme={theme => ({ ...theme, borderRadius: 'none', colors: { ...theme.colors, primary25: 'primary', primary: 'neutral5', }, })} />
bt1cpqcv4#
const style = { control:base =〉({ ...base,border:0,boxShadow:“})};
9w11ddsr5#
老问题,但蓝色的轮廓是一个下拉阴影的输入字段本身(至少是在我的情况下),我结束了只是添加一个自定义类的选择领域一样
<ReactSelect title = { __( 'Title', 'lang' ) } className = { 'your-custom-class' } ...
然后用
.your-custom-class input { box-shadow: none; }
uujelgoq6#
Akshay Kumar的awnser的另一种方法对我有效(顺风):
input[id^="react-select-"] { @apply focus:outline-none focus:border-transparent focus:ring-0; }
6条答案
按热度按时间qfe3c7zg1#
盒子阴影由
@tailwindcss/forms
插件引入。表单插件的默认策略是在表单元素上全局应用样式。您可以通过在
tailwind.config.js
文件中为插件指定不同的策略来更改此设置。但是现在你必须在所有你想用
@tailwindcss/forms
插件样式化的表单元素上应用form-[inputType]
类。这里有更多关于这个:https://github.com/tailwindlabs/tailwindcss-forms#using-only-global-styles-or-only-classes
ie3xauqp2#
您需要传递自定义样式属性。
就像这样
尝试使用
customStyles
对象进一步设置样式:)3phpmpom3#
默认样式派生自主题对象,您可以像样式一样更改该主题对象。
主题对象也可用于样式函数。
bt1cpqcv4#
const style = { control:base =〉({ ...base,border:0,boxShadow:“})};
9w11ddsr5#
老问题,但蓝色的轮廓是一个下拉阴影的输入字段本身(至少是在我的情况下),我结束了只是添加一个自定义类的选择领域一样
然后用
uujelgoq6#
Akshay Kumar的awnser的另一种方法对我有效(顺风):