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

Question

If I have form input which label --> I cannot reduce the size of the label.

In this example fontSize will not be applied:

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

Does someone has an idea about how to solve the issue?

Answer 1

Can you try this simple way to apply css on any component.

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

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

Answer 2

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:

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

Answer 3

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>

Answer 4

If you can't create external CSS files and rules, you can't override the Label 's styling with Form.Input .

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:

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

See the docs

Answer 5

Here's how to customize semantic-ui input font size without the need to create a custom class or use !important.

1. Create a css file (let's call it input.css ) and add the following rule:

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

2. Import the css file into your root component.

import './input.css'

Boom! Input font size adjusted.