无法使用语义-ui-react 减小 reactjs 中标签的字体大小

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='Enter Password' type='password' />
vs

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

Answer 3

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

但这只是 "shorthand"（复合）版本：

<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'}}  />

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

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

Answer 5

以下是自定义 semantic-ui 输入字体大小的方法，无需创建自定义 class 或使用 !important。

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

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

将 css 文件导入您的根组件。

import './input.css'

轰！输入字体大小已调整。

无法使用语义-ui-react 减小 reactjs 中标签的字体大小

Cannot reduce the fontSize of label in reactjs using semantic-ui-react

javascript

reactjs

semantic-ui-react