无法使用语义 ui-react 减少 reactjs 中标签的 fontSize

Question

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

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

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

有人知道如何解决问题吗？

Answer 1

你能试试这种简单的方法在任何组件上应用 css 吗？

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

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

Answer 2

官方文档中也展示了一种更简洁的方法。

代替：

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

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

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

Answer 3

我认为您需要像下面这样拆分标签和输入，而不是使用内联样式：

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

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

但这只是以下内容的“速记”（复合）版本：

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

查看文档

Answer 5

以下是如何自定义语义 UI 输入字体大小，而无需创建自定义类或使用 !important。

1. 创建一个 css 文件（我们称之为input.css ）并添加以下规则：

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

2. 将 css 文件导入到您的根组件中。

import './input.css'

繁荣！ 输入字体大小调整。