如何更改 React Bootstrap 中浮动标签的背景颜色？

Question

我正在使用 React Bootstrap 5 为我的输入创建浮动标签，但我注意到每当选择输入以及输入文本时，标签都会获得白色背景，如下图所示：

（我无法正确发布）

我给背景赋予了颜色以使其明显。

现在，我发现了类似的问题，根据我的理解，你需要在输入焦点或其他内容后设置背景透明度，但我使用 CSS 的经验有限，我不确定我是否理解如何做到这一点。

另外，整个焦点实际上意味着什么？每当实际选择输入时，您都会看到蓝色轮廓吗？因为即使在框外单击后标签仍然存在，这是否意味着输入不再处于焦点？

我正在考虑对浮动标签使用内联样式，而不是创建一个单独的CSS文件（CSS文件会覆盖Bootstrap CSS吗？我真的不明白它是如何工作的，真的），并且我找不到任何工作示例可能会帮助我弄清楚如何做到这一点...

我尝试了这个答案中的建议，但我没能让它发挥作用。抱歉，如果我的问题是多余的，我只是想我可以在这方面使用更多指导。我会提供代码，但它几乎只是我正在使用的 React Bootstrap 默认浮动标签，没什么特别的。我想这就是为什么我无法根据自己的需要修改它。

Answer 1

<Form.Floating className="mb-3">
    <Form.Control
      id="password"
      type="password"
      placeholder="Enter Your Password here"
      style={{
        backgroundColor: 'transparent',
        border: 'none',
      }}
    />
    <label htmlFor="password">Password</label>
  </Form.Floating>