无法使用语义UI反应减少reactjs中标签的fontSize

Question

如果我有输入哪个标签的表格->我无法减小标签的大小。

在此示例中，不会应用fontSize：

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

有人对如何解决此问题有想法吗？

Answer 1

我认为您需要像下面这样分割标签和输入，然后才能使用内联样式：

<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>

Answer 2

您是否可以尝试这种简单的方法将CSS应用于任何组件。

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

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

Answer 3

如果无法创建外部CSS文件和规则，则无法使用Label覆盖Form.Input的样式。

但是那只是以下内容的“简写”（复合）版本：

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

并且使用这种方法，您可以覆盖Label样式：

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

请参见docs

Answer 4

official docs中也演示了一种更清洁的方法。

而不是：

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

将具有样式首选项的对象传递给标签prop，如下所示：

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