如何在Material UI对话框标题右上角添加关闭图标 [英] How to add close icon in Material UI Dialog Header top right corner

问题描述

要在标题区域的右上角添加关闭图标.请同样帮我.我已经使用了材质UI对话框.evrything工作正常，但我想在顶部关闭按钮.请参阅所附图片.

Want to add close icon in header section top right corner. Please help me for same. I have used Material UI Dialog. evrything is working fine but I want close button on top section. Please see the attached image.

推荐答案

将图像图标放在标题中，然后使用 css 正确放置它，请尝试以下操作:

Put the image icon in the title, and use the css to position it correctly, Try this:

在关闭图像上应用此 css :

let closeImg = {cursor:'pointer', float:'right', marginTop: '5px', width: '20px'};

<Dialog
    modal={false}
    open={true}
    title={
            <div>
                ABC 
                <img src='https://d30y9cdsu7xlg0.cloudfront.net/png/53504-200.png' style={closeImg}/>
            </div>
        }
>
    Hello
</Dialog>

检查工作提琴: https://jsfiddle.net/ve0qbgLr/

这篇关于如何在Material UI对话框标题右上角添加关闭图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！