AsyncPaginate 中顺风环导致的样式问题

Question

当我点击 AsyncPaginate 的输入栏中时，就会出现蓝色的较小输入框。一旦我评论顺风配置文件，内框就会消失。 Tailwinds 类（例如

border-none focus:ring-transparent

）也不会删除内框的颜色。您可以看到下面的图片和代码

import { AsyncPaginate } from "react-select-async-paginate";
const Search = () => {
const [search, setSearch] = useState(null);
return (
<div className="border-transparent">
   <AsyncPaginate  
   placeholder="Search for city"
   debounceTimeout={600}
   value={search}
   className="border-none focus:ring-transparent"
   // styles={style}
   onChange={handleOnChange}
   styles={{
   control: (baseStyles, state) => ({
   ...baseStyles,
   borderColor: state.isFocused ? 'orange' : 'red',
   ring: 0, // Remove the ring effect
   }),
   }}
   loadOptions={loadOptions}
   >
   </AsyncPaginate>
</div>
)
}
export default Search

Answer 1

最终通过为“基”和“类”设置策略解决了问题。

plugins: [
  require("@tailwindcss/forms")({
    strategy: 'base', // only generate global styles
    strategy: 'class', // only generate classes
  }),
],

Answer 2

根据这篇文章找到了更精确的解决方案 https://www.jussivirtanen.fi/writing/styling-react-select-with-tailwind

传递样式以覆盖默认 CSS。

<Select
    styles={{
        input: base => ({
            ...base,
            'input:focus': {
                boxShadow: 'none',
            },
        }),
    }}
/>