正如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> }}