web-dev-qa-db-ja.com

マテリアルUIダイアログヘッダーの右上隅に閉じるアイコンを追加する方法

ヘッダーセクションの右上隅に閉じるアイコンを追加したい。同じように私を助けてください。 Material UI Dialogを使用しました。 evrythingは正常に機能していますが、上部に閉じるボタンが必要です。添付画像をご覧ください。 enter image description here

user-interfacereactjsmaterial-uimaterial
11
Nitin Shinde

タイトルに画像アイコンを配置し、cssを使用して正しく配置します。これを試してください：

閉じる画像にこの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/

17
Mayank Shukla

これはMaterial UI V1より前に求められたことを知っていますが、受け入れられた答えはMaterial UIバージョン0（またはそれが呼んだもの）で機能します。

バージョン1のヘルプが必要な人のために、MUIの担当者はdisableTypographyを受け入れる<DialogTitle />コンポーネントを公開しているため、ダイアログをカスタマイズできます。

例えば

<Dialog open={this.state.show} onClose={this.onClose}>
    <DialogTitle disableTypography className={styles.dialogTitle}>
        <h2>Dialog...</h2>
        <IconButton onClick={this.onClose}>
            <CloseIcon />
        </IconButton>
    </DialogTitle>
    <DialogContent>
        <span>Dialog Content</span>
    </DialogContent>
</Dialog>

h2とアイコンの間にスペースを入れてflexを使用します

.dialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

それが誰かを助けることを願っています。 :-)

15
Kurtis