Сокращенное модальное содержимое не работает с тегами HTML в React Semantic UI

Question

Как упомянуто в документе , мы можем создать модал в этом сокращенном методе. Но если я добавлю какие-либо теги 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 }]}
  />
)

Вы можете редактировать это в самом разделе «Попробуйте» здесь:

Answer 1

Это распространенная ошибка, и очень скоро она будет раскрыта в новых сокращенных документах.

Фактическая проблема: при передаче элемента React он заменит весь сокращенный слот.

Действительныйиспользования:

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