时间戳

首页 > 解决方案 > 速记模态内容不适用于 React Semantic UI 中的 HTML 标签

css - 速记模态内容不适用于 React Semantic UI 中的 HTML 标签

问题描述

如文档中所述，我们可以使用这种速记方法创建模态。但是，如果我在该部分中添加任何 HTML 标记，content则不会保留原始样式。

例如：工作正常：

const ModalExampleShorthand = () => (
  <Modal
    trigger={<Button>Show Modal</Button>}
    header='Reminder!'
    content='Call Benjamin regarding the reports.'
    actions={['Snooze', { key: 'done', content: 'Done', positive: true }]}
  />
)

不工作（内容部分样式消失）：

const ModalExampleShorthand = () => (
  <Modal
    trigger={<Button>Show Modal</Button>}
    header='Reminder!'
    content={<p>Call Benjamin regarding the reports</p>}
    actions={['Snooze', { key: 'done', content: 'Done', positive: true }]}
  />
)

您可以在此处的“试用”部分中对其进行编辑：

标签： cssreactjsstylessemantic-uisemantic-ui-react

解决方案

这是一个常见的错误，很快就会在新的速记文档中介绍。

实际问题：当您传递一个 React 元素时，它将替换整个速记槽。

有效的用法是：

content={<Modal.Content>Call Benjamin regarding the reports.</Modal.Content>}
content={{ content: <p>Call Benjamin regarding the reports.</p> }}

推荐阅读