[英]Cannot reduce the fontSize of label in reactjs using semantic-ui-react
If I have form input which label --> I cannot reduce the size of the label.如果我有表单输入哪个标签 --> 我无法减小标签的大小。
In this example fontSize will not be applied:在此示例中,将不应用 fontSize:
<Form.Input label="Username" style={{fontSize: '10px'}} />
Does someone has an idea about how to solve the issue?有人知道如何解决问题吗?
Can you try this simple way to apply css on any component.你能试试这种简单的方法在任何组件上应用 css 吗?
.inputCls { font-size: 10px !important; }
<Form.Input label="Username" className="inputCls" />
There is a cleaner approach which is also demonstrated in the official docs . 官方文档中也展示了一种更简洁的方法。
Instead of:代替:
<Form.Input label="Username" style={{fontSize: '10px'}} />
Pass an object with style preferences to the label prop as follows:将具有样式首选项的对象传递给 label 道具,如下所示:
<Form.Input label={{ children: "Username", style:{ fontSize: '10px' } }} />
I think you need to split label and input like this below than you can use inline styling:我认为您需要像下面这样拆分标签和输入,而不是使用内联样式:
<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>
If you can't create external CSS
files and rules, you can't override the Label
's styling with Form.Input
.如果您无法创建外部
CSS
文件和规则,则无法使用Form.Input
覆盖Label
的样式。
But that's only the "shorthand" (compound) version for:但这只是以下内容的“速记”(复合)版本:
<Form.Field>
<label>Enter text</label>
<Input type='text' />
</Form.Field>
And with this approach you can override the Label
styling:使用这种方法,您可以覆盖
Label
样式:
<Form.Field>
<label style={{fontSize: '15px'}}>Enter text</label>
<Input type='text' />
</Form.Field>
Here's how to customize semantic-ui input font size without the need to create a custom class or use !important.以下是如何自定义语义 UI 输入字体大小,而无需创建自定义类或使用 !important。
input.css
) and add the following rule:input.css
)并添加以下规则:.ui.input > input {
font-size: 10px;
}
import './input.css'
Boom!繁荣! Input font size adjusted.
输入字体大小调整。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.