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

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>