当输入字段是react js中的焦点时如何更改标签颜色

Question

当输入字段聚焦在我正在使用的 react js 中时，您能告诉我如何更改标签颜色吗 semantic UI

https://react.semantic-ui.com/collections/form/#types-form 这里是我的代码

<Form>
    <Form.Field>
      <label>First Name</label>
      <input placeholder="First Name" />
    </Form.Field>
    <Form.Field>
      <Checkbox label="I agree to the Terms and Conditions" />
    </Form.Field>
    <Button type="submit">Submit</Button>
  </Form>

https://codesandbox.io/s/semantic-ui-react-example-i6crv

Answer 1

您实际上可以使用:focus-within选择器的 CSS 来轻松应用 CSS。

div:focus-within当任何元素聚焦在 div 内时应用 CSS。在你的情况下，你可以给你的input小组上课——比如说input-group。然后使用.input-group:focus-within label选择器来设置标签的样式。

查看代码的工作代码沙盒演示。

我所做的只是添加了以下样式表并且它起作用了。

.input-group:focus-within label {
  color: red !important;
}