来自chakra-ui和react-select的浮动标签

Question

作为菜鸟，我将 ReactSelect 作为默认组件，并且我在使用 chakra-ui 实现浮动

label

时遇到了麻烦，如here所示。

尝试添加 className="identifier" 以便

theme

可以找到我的组件。使用extendTheme 可以起到一定的作用

component/index

。

'input:not(:placeholder-shown) + label, .identifier:not(:placeholder-shown) + label...

碰巧

label

它始终处于活动状态，浮动在左上方，并且在没有选择任何选项时不会转换回中心。

如果从标识符中删除输入

"input:not(:placeholder-shown) + label, .identifier:not(:placeholder-shown) + label...

反对行为。 日期或文本输入不会发生同样的情况。

有什么建议吗？ https://codesandbox.io/embed/eager-darkness-3nh94z?fontsize=14&hidenavigation=1&theme=dark

Answer 1

我也遇到了你同样的问题。 我发现存在这个包：https://www.npmjs.com/package/chakra-react-select创建是为了更容易在chackra-ui反应环境中使用react-select的全部功能。

这里是使用此包解决问题的步骤：https://github.com/csandman/chakra-react-select/issues/83

在 git 问题中，他们使用 CreatableSelect，但我测试过它也适用于普通 Select（来自 chakra-react-select 包）