{"id":3535,"date":"2022-08-29T19:40:58","date_gmt":"2022-08-29T10:40:58","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=3535"},"modified":"2022-08-29T19:58:16","modified_gmt":"2022-08-29T10:58:16","slug":"react-table-customization","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=3535","title":{"rendered":"<small>Material-UI :  Adding Customization CSS styles<\/small>"},"content":{"rendered":"<p>1.  \u3084\u308b\u3053\u3068<br \/>\n&#8211; Customization\u306estyle\u3092Collapsible \u306b\u9069\u7528\u3059\u308b<br \/>\n&#8211; row\u306e\u80cc\u666f\u3092\u4ea4\u4e92\u306b\u8272\u9055\u3044\u306b\u3059\u308b<br \/>\n&#8211; \u30b3\u30d4\u30da\u3057\u305f\u3060\u3051\u3067\u306f\u3001\u4ea4\u4e92\u306e\u8272\u9055\u3044\u306b\u306a\u3089\u306a\u3044<\/p>\n<p>2. \u7d50\u679c\u306e\u8868\u793a<br \/>\n<img decoding=\"async\" loading=\"lazy\" width=\"768\" height=\"425\" src=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220829-1-768x425-1.png\" alt=\"\"  class=\"alignnone size-medium wp-image-3536\" srcset=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220829-1-768x425-1.png 768w, https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220829-1-768x425-1-300x166.png 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/p>\n<p>3. Customization original style<br \/>\n&#8211; &#8216;&#038;:nth-of-type(odd)&#8217;<\/p>\n<pre>\r\nconst StyledTableRow = styled(TableRow)(({ theme }) => ({\r\n  '&:nth-of-type(odd)': {\r\n    backgroundColor: theme.palette.action.hover,\r\n  },\r\n  \/\/ hide last border\r\n  '&:last-child td, &:last-child th': {\r\n    border: 0,\r\n  },\r\n}));\r\n<\/pre>\n<p>4. Collapsible style<br \/>\n&#8211;  &#8216;&#038;:nth-of-type(4n+1)&#8217;<\/p>\n<pre>\r\nconst StyledTableRow = styled(TableRow)(({ theme }) => ({\r\n  '&:nth-of-type(4n+1)': {\r\n    backgroundColor: theme.palette.action.hover,\r\n  },\r\n  \/\/ hide last border\r\n  '&:last-child td, &:last-child th': {\r\n    border: 0,\r\n  },\r\n}));\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>1. \u3084\u308b\u3053\u3068 &#8211; Customization\u306estyle\u3092Collapsible \u306b\u9069\u7528\u3059\u308b &#8211; row\u306e\u80cc\u666f\u3092\u4ea4\u4e92\u306b\u8272\u9055\u3044\u306b\u3059\u308b &#8211; \u30b3\u30d4\u30da\u3057\u305f\u3060\u3051\u3067\u306f\u3001\u4ea4\u4e92\u306e\u8272\u9055\u3044\u306b\u306a\u3089\u306a\u3044 2&#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\/3535"}],"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=3535"}],"version-history":[{"count":8,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/3535\/revisions"}],"predecessor-version":[{"id":3539,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/3535\/revisions\/3539"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}