Блог

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

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

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

Актуальная проблема: когда вы передаете элемент React, он заменяет весь интервал сокращения.

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

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