{"id":3472,"date":"2022-08-31T07:19:20","date_gmt":"2022-08-30T22:19:20","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=3472"},"modified":"2022-08-31T19:59:22","modified_gmt":"2022-08-31T10:59:22","slug":"naterialui-add-style-to-bootstrapdialog","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=3472","title":{"rendered":"<small>MaterialUI :BootstrapDialog\u306e\u89d2\u3092\u4e38\u3081\u3066\u3001body\u3067scroll<\/small>"},"content":{"rendered":"<p><strong>1. Add style to BootstrapDialog <\/strong><br \/>\n<a href=\"https:\/\/mui.com\/material-ui\/react-dialog\/\">https:\/\/mui.com\/material-ui\/react-dialog\/<\/a><br \/>\n&#8211; example\u3078\u306e\u8ffd\u52a0<br \/>\n&#8211; BootstrapDialog\u306e\u89d2\u3092\u4e38\u3081\u308b<br \/>\n&#8211; Cancel Ok \u3092&#8217;40px&#8217;\u53f3\u306b\u79fb\u52d5<br \/>\n&#8211; paper\u3067scroll\u304b\u3089body\u3067scroll\u306b\u5909\u66f4<\/p>\n<p><strong>2. Add borderRadius:&#8217;20px&#8217; <\/strong><br \/>\n&#8211; before<br \/>\n<img decoding=\"async\" loading=\"lazy\" width=\"832\" height=\"625\" src=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220831-1-1.png\" alt=\"\" class=\"alignnone size-medium wp-image-3656\" srcset=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220831-1-1.png 832w, https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220831-1-1-300x225.png 300w, https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220831-1-1-768x577.png 768w\" sizes=\"(max-width: 832px) 100vw, 832px\" \/><\/p>\n<pre>\r\nconst BootstrapDialog = styled(Dialog)(({ theme }) => ({\r\n    '& .MuiDialogContent-root': {\r\n        padding: theme.spacing(2),\r\n    },\r\n    '& .MuiDialogActions-root': {\r\n        padding: theme.spacing(1),\r\n    }\r\n}));\r\n<\/pre>\n<p>&#8211; after<br \/>\n<img decoding=\"async\" loading=\"lazy\" width=\"834\" height=\"627\" src=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220831-2-1.png\" alt=\"\" class=\"alignnone size-medium wp-image-3653\" srcset=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220831-2-1.png 834w, https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220831-2-1-300x226.png 300w, https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220831-2-1-768x577.png 768w\" sizes=\"(max-width: 834px) 100vw, 834px\" \/><\/p>\n<pre>\r\nconst BootstrapDialog = styled(Dialog)(({ theme }) => ({\r\n    '& .MuiDialogContent-root': {\r\n        padding: theme.spacing(2),\r\n    },\r\n    '& .MuiDialogActions-root': {\r\n        padding: theme.spacing(1),\r\n        paddingRight: '40px',\r\n    },\r\n    '& .MuiDialog-paper': {\r\n        borderRadius: '20px',\r\n    }\r\n}));\r\n<\/pre>\n<p><strong>3. Add scroll=&#8221;body&#8221; <\/strong><br \/>\n&#8211; before<\/p>\n<pre>\r\n  &lt;BootstrapDialog\r\n     onClose={handleClose}\r\n       aria-labelledby=\"customized-dialog-title\"\r\n       open={open}\r\n<\/pre>\n<p>&#8211; after<\/p>\n<pre>\r\n  &lt;BootstrapDialog\r\n    onClose={handleClose}\r\n      aria-labelledby=\"customized-dialog-title\"\r\n      open={open}\r\n      scroll=\"body\"\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>1. Add style to BootstrapDialog https:\/\/mui.com\/material-ui\/react-dialog\/ &#8211; example\u3078\u306e\u8ffd\u52a0 &#8211; Bootstra&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/3472"}],"collection":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3472"}],"version-history":[{"count":45,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/3472\/revisions"}],"predecessor-version":[{"id":3608,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/3472\/revisions\/3608"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}