如何为PrimeReact的FloatLabel组件设置浮动时的样式？

要实现标签浮动时修改颜色，你需要调整组件的类名绑定和CSS选择器的优先级，具体步骤如下：

1. 给FloatLabel组件添加自定义类名
   修改你的React组件代码，给<FloatLabel>加上className="custom-float-label"，确保CSS能正确定位目标元素：

   <FloatLabel className="custom-float-label">
       <InputText
            id="username"
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
        />
        <label htmlFor="username">Username</label>
   </FloatLabel>
   

2. 修正CSS选择器结构
   你之前的CSS选择器存在嵌套逻辑错误，custom-float-label和p-float-label是同一个元素上的类，并非父子关系。替换为以下CSS代码：

   /* 给标签添加颜色过渡动画 */
   .custom-float-label.p-float-label label {
     transition: color 0.3s ease;
   }
   
   /* 标签浮动激活时的颜色设置 */
   .custom-float-label.p-float-label label.p-float-label-active {
     color: #000; /* 可替换为你需要的任意颜色值 */
   }
   

如果上述代码仍不生效，可以尝试进一步提升选择器特异性，比如结合输入框ID：

#username + label.p-float-label-active {
  color: #000;
}

内容的提问来源于stack exchange，提问作者Stefano Romito