无法在react semantic中重新指定标签的fontSize

我认为您需要像下面这样拆分标签和输入,这样才能使用内联样式:

<Form.Input label='Enter Password' type='password' />
vs

<Form.Field>
  <label style={{fontSize: '10px'}}>Enter Password</label>
  <Input type='password' style={{fontSize: '10px'}} />
</Form.Field>

你能用这个简单的方法在任何组件上应用css吗。

.inputCls {
  font-size: 10px !important;
}

<Form.Input label="Username" className="inputCls"  />

还有一种更干净的方法,这也在 official docs .

<Form.Input label="Username" style={{fontSize: '10px'}}  />

将具有样式首选项的对象传递到标签属性,如下所示:

<Form.Input label={{ children: "Username", style:{ fontSize: '10px' } }} />

如果你不能创建外部 CSS Label 的样式 Form.Input

<Form.Field>
  <label>Enter text</label>
  <Input type='text' />
</Form.Field>

标签

<Form.Field>
  <label style={{fontSize: '15px'}}>Enter text</label>
  <Input type='text' />
</Form.Field>

看到了吗 docs

下面介绍如何自定义语义ui输入字体大小,而无需创建自定义类或使用!很重要。

1. input.css )并添加以下规则:

.ui.input > input {
  font-size: 10px;
}

2. 将css文件导入根组件。

import './input.css'