MaterialUI 대화 상자의 크기를 콘텐츠에 맞게 늘리거나

매우 멋진 MaterialUI이지만 가끔 가려운 곳에 손이 닿지 않는다.
예를 들어 대화.
콘텐츠의 크기보다 크게 표시됩니다.

이런 저장 확인 대화상자를 표시하려고 했을 경우.

dialog.tsx

<Dialog
    title="保存します"
    open={true}
    onRequestClose={()=>this.handleCloseConfirm()}
    actions={[
        <FlatButton
            label="キャンセル"
            onTouchTap={()=>this.handleCloseConfirm()}/>,
        <FlatButton
            label="保存"
            primary={true}
            keyboardFocused={true}
            onTouchTap={()=>this.handleSave()}/>,
        ]}>

    <TextField floatingLabelText="タイトル"
               onChange={(e)=>this.handleChangeTitle(e)}/>
</Dialog>

아, 긴. 길다.



아래와 같이 contentStyle 속성으로 직접 폭·높이를 지정한다, 라고 하는 방법도 해결 방법의 하나로서는 있습니다만.

dialog.tsx

<Dialog
    title="保存します"
    open={true}
    onRequestClose={()=>this.handleCloseConfirm()}
    contentStyle={{width: '350px'}}
    actions={[
        <FlatButton
            label="キャンセル"
            onTouchTap={()=>this.handleCloseConfirm()}/>,
        <FlatButton
            label="保存"
            primary={true}
            keyboardFocused={true}
            onTouchTap={()=>this.handleSave()}/>,
        ]}>

    <TextField floatingLabelText="タイトル"
               onChange={(e)=>this.handleChangeTitle(e)}/>
</Dialog>

대화가 나타날 때마다 지정합니까? 콘텐츠가 가변적이면 어떻게 해야 하나요? 라는 문제들에 부딪칩니다.
Redux에서 능숙한 것 다이얼로그의 표시 처리 자체를 집약해 컨텐츠만 바꾸고 싶다고 하는 경우는 더욱더군요.

생각하지 않은 끝에 짜낸 소기술이 이쪽.position:fixed 에 의해 좌표 지정으로 배치되어 있는 다이얼로그를 무리하게 .flexbox 지정하지 않으면 안되는 것이 매우 유감입니다만 개인적으로는 매우 편리합니다.
물론 표시 위치는 window의 리사이즈 이벤트에도 추종해요.

app.sass

.dialog, .dialog-content
  // 勝手にflexbox化
  display: flex !important
  justify-content: center !important
  align-items: center !important
  // position:fixed時の配置情報をリセット
  padding-top: 0px !important
  transform: initial !important

dialog.tsx

<Dialog
    title="保存します"
    open={true}
    onRequestClose={()=>this.handleCloseConfirm()}
    className="dialog"
    contentClassName="dialog-content"
    actions={[
        <FlatButton
            label="キャンセル"
            onTouchTap={()=>this.handleCloseConfirm()}/>,
        <FlatButton
            label="保存"
            primary={true}
            keyboardFocused={true}
            onTouchTap={()=>this.handleSave()}/>,
        ]}>

    <TextField floatingLabelText="タイトル"
               onChange={(e)=>this.handleChangeTitle(e)}/>
</Dialog>