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

例如:
工作正常:

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 }]}
  />
)


您可以在“尝试”部分本身中进行编辑here:

最佳答案

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

实际问题:传递React元素时,它将替换整个速记槽。

有效用法是:

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

关于css - 简写模式内容无法在React Semantic UI中与HTML标记一起使用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55471975/

10-13 01:44