如何在语义 UI-React 中将标签定位在图标下方？

Question

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

例如：

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

在上面的代码片段中，标签 'Pause' 被添加到按钮中图标的左侧。我的要求是，我要添加标签'Pause below the icon in the button'。我尝试设置：

    labelPosition='down' or 'bottom'

然而它不起作用。有什么办法吗？

Answer 1

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

您可以使用 class 并在那里定义样式，或者使用像这样的特定选择器：div.ui.stackable.two.column.grid.button{.

如果这个问题解决了，请告诉我，否则我有另一个解决方案。

Answer 2

在图标和文本之间添加一个换行符。

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

要更改图标和文本之间的 space 量，您可以为换行符添加边距。

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

How to position label under icon in Semantic UI-React?