{"id":3549,"date":"2022-08-30T09:53:38","date_gmt":"2022-08-30T00:53:38","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=3549"},"modified":"2022-09-01T06:56:17","modified_gmt":"2022-08-31T21:56:17","slug":"3549","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=3549","title":{"rendered":"<small>Material-UI : Add Style to table<\/small>"},"content":{"rendered":"<p><strong>1. Add Style to table<\/strong><br \/>\n&#8211;  Customization table\u306estyle\u3092 Sorting &#038; selecting table\u306b\u79fb\u3059<br \/>\n<img decoding=\"async\" src=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220830-1-1.jpg\" alt=\"\" class=\"alignnone size-medium wp-image-3584\" \/><br \/>\n<a href=\"https:\/\/mui.com\/material-ui\/react-table\/\">https:\/\/mui.com\/material-ui\/react-table\/<\/a><\/p>\n<p><strong>2.Original Sorting &#038; selecting table <\/strong><br \/>\n&#8211; original<br \/>\n<img decoding=\"async\" loading=\"lazy\" width=\"801\" height=\"501\" src=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220830-1.png\" alt=\"\"  class=\"alignnone size-medium wp-image-3550\" srcset=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220830-1.png 801w, https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220830-1-300x188.png 300w, https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220830-1-768x480.png 768w\" sizes=\"(max-width: 801px) 100vw, 801px\" \/><\/p>\n<p><strong>3. StyledTableRow<\/strong><br \/>\n&#8211; Change from TableRow to StyledTableRow<br \/>\n&#8211; Change from TableCell to StyledTableCell<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" width=\"801\" height=\"501\" src=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220830-2.png\" alt=\"\"  class=\"alignnone size-medium wp-image-3551\" srcset=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220830-2.png 801w, https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220830-2-300x188.png 300w, https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220830-2-768x480.png 768w\" sizes=\"(max-width: 801px) 100vw, 801px\" \/><\/p>\n<pre>\r\n  const 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<pre>\r\nconst StyledTableCell = styled(TableCell)(({ theme }) => ({\r\n  [`&.${tableCellClasses.head}`]: {\r\n    backgroundColor: theme.palette.common.black,\r\n    color: theme.palette.common.white,\r\n  },\r\n  [`&.${tableCellClasses.body}`]: {\r\n    fontSize: 14,\r\n  },\r\n}));\r\n<\/pre>\n<p><strong>4.StyledTableCell<\/strong><br \/>\n&#8211; Change from TableSortLabel to tyledTableSortLabel<br \/>\n<img decoding=\"async\" loading=\"lazy\" width=\"802\" height=\"499\" src=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220830-4.png\" alt=\"\" lass=\"alignnone size-medium wp-image-3553\" srcset=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220830-4.png 802w, https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220830-4-300x187.png 300w, https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220830-4-768x478.png 768w\" sizes=\"(max-width: 802px) 100vw, 802px\" \/><\/p>\n<pre>\r\nconst StyledTableSortLabel = styled(TableSortLabel)(({ theme }) => ({\r\n  [`&.${tableSortLabelClasses.root}`]: {\r\n    color: theme.palette.common.white,\r\n  },\r\n  [`&.${tableSortLabelClasses.active}`]: {\r\n    color: theme.palette.common.white,\r\n  },\r\n  [`&.${tableSortLabelClasses.icon}`]: {\r\n    color: theme.palette.common.white,\r\n  },\r\n  [`&.${tableSortLabelClasses.iconDirectionDesc}`]: {\r\n     color: theme.palette.common.white,\r\n  },\r\n  [`&.${tableSortLabelClasses.iconDirectionAsc}`]: {\r\n    color: theme.palette.common.white,\r\n  },\r\n}));\r\n<\/pre>\n<p><strong>5. Add Icon <\/strong><br \/>\n&#8211; {order === &#8216;desc&#8217; ? ( ?  ): ( ? )}<br \/>\n<img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"502\" src=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220830-5.png\" alt=\"\" class=\"alignnone size-medium wp-image-3554\" srcset=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220830-5.png 800w, https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220830-5-300x188.png 300w, https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220830-5-768x482.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><br \/>\n&#8211; before<\/p>\n<pre>\r\n  {orderBy === headCell.id ? (\r\n    &lt;Box component=\"span\" sx={visuallyHidden}>\r\n      {order === 'desc' ? 'sorted descending' : 'sorted ascending'}\r\n    &lt;\/Box>\r\n  ) : null}\r\n<\/pre>\n<p>&#8211; after<\/p>\n<pre>\r\n  {orderBy === headCell.id ? (\r\n    &lt;Box component=\"span\" >\r\n      {order === 'desc' ? (<span > ? <\/span> ): (<span> ? <\/span>)}\r\n    &lt;\/Box>\r\n  ) : null}\r\n<\/pre>\n<p><strong>6. Add Icon style<\/strong><br \/>\n(1) \u8868\u793a\u4f4d\u7f6e\u306e\u8a2d\u5b9a<\/p>\n<pre>\r\nsx={{ color: 'text.secondary', display: 'inline', fontSize: 20 , marginRight:1}}>\r\n<\/pre>\n<p>(2)\u3000\u6587\u5b57\u77e2\u5370<\/p>\n<pre>\r\n&lt;Box component=\"span\" sx={{ color: '#CCC', display: 'inline', fontSize: 20 , marginRight:1}}>\r\n {order === 'desc' ? (<span > &#x2193; <\/span> ): (<span> &#x2191; <\/span>)}\r\n&lt;Box>\r\n<\/pre>\n<p><strong>7. Header checkbox style<\/strong><br \/>\n&#8211; Header checkbox color \u3092 white \u306b\u5909\u66f4<br \/>\n<img decoding=\"async\" loading=\"lazy\" width=\"847\" height=\"442\" src=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220831-3-1.png\" alt=\"\"  class=\"alignnone size-medium wp-image-3668\" srcset=\"https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220831-3-1.png 847w, https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220831-3-1-300x157.png 300w, https:\/\/blog.wsd.sh\/wp-content\/uploads\/2022\/08\/20220831-3-1-768x401.png 768w\" sizes=\"(max-width: 847px) 100vw, 847px\" \/><\/p>\n<pre>\r\nimport { checkboxClasses } from '@mui\/material\/Checkbox';\r\n\r\nconst StyledCheckbox = styled(Checkbox)(({ theme }) => ({\r\n  [`&.${checkboxClasses.root}`]: {\r\n    color: theme.palette.common.white,\r\n  },\r\n}));\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>1. Add Style to table &#8211; Customization table\u306estyle\u3092 Sorting &#038; selecting table\u306b\u79fb\u3059 https:\/\/mui.com\/mat&#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\/3549"}],"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=3549"}],"version-history":[{"count":53,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/3549\/revisions"}],"predecessor-version":[{"id":3558,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/3549\/revisions\/3558"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}