如何在Semantic UI-React中将标签置于图标下？

Question

我正在使用Semantic UI-React。我的问题是如何在图标下放置标签或文字？图标的左侧和右侧只有两个默认选项。但是我想将标签放在图标下方。 我正在使用Semantic-React库。

例如：

<Button icon labelPosition='left'>
  <Icon name='pause' />
  Pause
</Button>

在上面的摘录中，标签为“暂停”标签。添加在按钮图标的左侧。 我的要求是，我想在按钮的图标下方添加标签＆＃39;暂停。我尝试设置：

    labelPosition='down' or 'bottom'

然而它不起作用。有没有办法做到这一点？

Answer 1

我遇到了同样的问题。 我相信只能通过覆盖Button元素的CSS属性来完成此操作。 请尝试为CSS值提供!important，因为在属性优先级方面，语义UI的优先级最高。

您可以使用一个类并在那里定义样式，也可以使用诸如div.ui.stackable.two.column.grid.button{这样的特定选择器。

请让我知道是否可以解决此问题，否则我有另一种解决方案。

Answer 2

在图标和文本之间插入换行符。

<Button icon>
  <Icon name='pause' />
  <br />
  Pause
</Button>

要更改图标和文本之间的间距，可以在换行符处添加边距。

<Button icon>
  <Icon name='pause' />
  <br style={{marginBottom: '8px'}} />
  Pause
</Button>