Semantic-Ui-React label color inverted

Question

I try to use label in semantic-ui-react. However, its color is inverted like below.

I expected below one.

My code is here:

<div className="resetBtn">
  <Button size="medium" onClick={this.onResetClick} primary>Reset dates</Button>
  <Label color="olive" pointing="below">Select the start date</Label>
</div>

What's wrong with my code?

Answer 1

You should use basic attribute for the label.

So instead of using Label as -

<Label color="olive" pointing="below">Select the start date</Label>

Add basic attribute to Label as -

<Label color="olive" pointing="below" basic>Select the start date</Label>

Hope this helps. More info on basic attribute of Label component is available here.