{"id":2461,"date":"2023-01-07T14:56:07","date_gmt":"2023-01-07T05:56:07","guid":{"rendered":"https:\/\/www.agile-software.site\/?p=2461"},"modified":"2023-01-07T14:56:07","modified_gmt":"2023-01-07T05:56:07","slug":"materialui-style","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=2461","title":{"rendered":"MaterialUI style"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">MUI v5 \u4ee5\u964d\u306e\u30ab\u30b9\u30bf\u30e0\u30b9\u30bf\u30a4\u30eb\u8a2d\u5b9a<\/h2>\n\n\n\n<p>MUI v5 \u4ee5\u964d\u3067\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u30ab\u30b9\u30bf\u30e0\u30b9\u30bf\u30a4\u30eb (CSS) \u3092\u5272\u308a\u5f53\u3066\u308b\u65b9\u6cd5\u306b\u306f\u3001\u5927\u304d\u304f\u4e0b\u8a18\u306e 2 \u3064\u306e\u3084\u308a\u65b9\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">sx prop \u3092\u4f7f\u3046\u65b9\u6cd5<\/h4>\n\n\n\n<p>MUI \u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u306f sx prop \u304c\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u3066\u3001\u3053\u3053\u306b\u30b9\u30bf\u30a4\u30eb\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u6e21\u3059\u3053\u3068\u3067\u3001\u500b\u5225\u306b\u30b9\u30bf\u30a4\u30eb\u3092\u8abf\u6574\u3067\u304d\u307e\u3059\u3002\u3064\u307e\u308a\u3001\u4f7f\u3044\u6368\u3066\u306e\u30b9\u30bf\u30a4\u30eb\u8a2d\u5b9a\u3092\u884c\u3046\u65b9\u6cd5\u3067\u3059\u3002sx prop \u306f HTML \u8981\u7d20\u672c\u6765\u306e style \u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u6bd4\u3079\u3066\u7c21\u6f54\u306a\u69cb\u6587\u3067\u8a18\u8ff0\u3067\u304d\u307e\u3059\u3002\u4f8b\u3048\u3070\u3001margin \u3084 padding \u306e\u8a2d\u5b9a\u7528\u306b 1 \u6587\u5b57 (m, p) \u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u540d\u304c\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u305f\u308a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">styled API \u3092\u4f7f\u3046\u65b9\u6cd5<\/h4>\n\n\n\n<p>\u65e2\u5b58\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30e9\u30c3\u30d7\u3059\u308b\u5f62\u3067\u3001\u30b9\u30bf\u30a4\u30eb\u62e1\u5f35\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u751f\u6210\u3057\u307e\u3059\u3002sx prop \u3092\u4f7f\u3063\u305f\u65b9\u6cd5\u306b\u6bd4\u3079\u3066\u518d\u5229\u7528\u6027\u304c\u9ad8\u3044\u65b9\u6cd5\u3067\u3001\u8907\u6570\u500b\u6240\u3067\u4f7f\u7528\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u30b9\u30bf\u30a4\u30eb\u8a2d\u5b9a\u3057\u305f\u3044\u3068\u304d\u306b\u4fbf\u5229\u3067\u3059\u3002styled() \u95a2\u6570\u306f\u5185\u90e8\u7684\u306b\u306f Emotion \u3068\u3044\u3046\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u63d0\u4f9b\u3059\u308b\u95a2\u6570\u306b\u3064\u306a\u304c\u3063\u3066\u3044\u307e\u3059\u304c\u3001MUI \u3067\u306f @mui\/material\/styles \u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u3053\u3068\u3067\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3044\u305a\u308c\u306e\u65b9\u6cd5\u3067\u3082\u3001\u30c6\u30fc\u30de\u8a2d\u5b9a\uff08theme \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\uff09\u306b\u57fa\u3065\u3044\u305f\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u304c\u53ef\u80fd\u3067\u3001\u3053\u306e\u4ed5\u7d44\u307f\u306b\u3088\u308a\u3001\u30a2\u30d7\u30ea\u5168\u4f53\u306e\u30c7\u30b6\u30a4\u30f3\u306b\u4e00\u8cab\u6027\u3092\u6301\u305f\u305b\u3084\u3059\u304f\u306a\u3063\u3066\u3044\u307e\u3059<\/p>\n","protected":false},"excerpt":{"rendered":"<p>MUI v5 \u4ee5\u964d\u306e\u30ab\u30b9\u30bf\u30e0\u30b9\u30bf\u30a4\u30eb\u8a2d\u5b9a MUI v5 \u4ee5\u964d\u3067\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u30ab\u30b9\u30bf\u30e0\u30b9\u30bf\u30a4\u30eb (CSS) \u3092\u5272\u308a\u5f53\u3066\u308b\u65b9\u6cd5\u306b\u306f\u3001\u5927\u304d\u304f\u4e0b\u8a18\u306e 2 \u3064\u306e\u3084\u308a\u65b9\u304c\u3042\u308a\u307e\u3059\u3002 sx prop \u3092\u4f7f\u3046\u65b9\u6cd5 MUI \u306e\u30b3\u30f3\u30dd\u30fc\u30cd<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jin_ogp_image_url":"","_jin_last_featured_id":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2461","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/2461","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2461"}],"version-history":[{"count":1,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/2461\/revisions"}],"predecessor-version":[{"id":2462,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/2461\/revisions\/2462"}],"wp:attachment":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}