feat: 修改表格样式 达到和样式稿一致的效果

src/components/Material.Ui/Table.jsx

@@ -90,7 +90,9 @@ export default function EnhancedTable(props) {
 
   return (
     <div className={classes.root}>
-      <Paper className={classes.paper} classes={{ elevation1: elevation1 || classes.elevation1 }} >
+      <Paper sx={{
+            boxShadow: 'none'
+          }} className={classes.paper} classes={{ elevation1: elevation1 || classes.elevation1 }} >
         {/* <Spin spin={spin} /> */}
         {toolbar && toolbar}
         <TableContainer style={{ ...tableContainerStyle }}>
@@ -111,6 +113,9 @@ export default function EnhancedTable(props) {
               {
                 (rows.length === 0 && !load) && <TableRow>
                   <TableCell
+                    sx={{
+                      borderBottom: '1px solid #F0F2F5'
+                    }}
                     colSpan={headCells?.filter(k => k.id === "checkbox")?.length === 0 ? headCells?.length : headCells?.length + 1}
                     className={classes.TypographyStyle}
                     style={{ minHeight: minHeight, height: minHeight, borderBottom: borderBottom ,padding:TableNodataPadding,lineHeight:TableNodataLineHeight}}
@@ -143,19 +148,25 @@ export default function EnhancedTable(props) {
                   >
                     {
                       headCells.filter(k => k.id === "checkbox").length > 0 && <TableCell  
+                      sx={{
+                        borderBottom: '1px solid #F0F2F5'
+                      }}
                       onClick={(event) => {
                         // if (!row[disabledparam]) return;
                         onRowClick && onRowClickDefault(row[param || "id"])
                         headCells.filter(k => k.id === "checkbox").length > 0 && handleClick(event, row[param || "id"])
                       }}
                        padding="checkbox">
-                        <Checkbox color={"primary"} checked={isItemSelected} inputProps={{ "aria-labelledby": labelId }} />
+                        <Checkbox sx={{ color: '#D1D6DE' }} color={"primary"} checked={isItemSelected} inputProps={{ "aria-labelledby": labelId }} />
                       </TableCell>
                     }
                     {
                       headCells.filter(item=>item.id !== 'checkbox').map((item, k) => {
                         return (
                           <TableCell key={k} component="th" id={labelId + k}
+                            sx={{
+                              borderBottom: '1px solid #F0F2F5'
+                            }}
                             // align={}
                             style={{ width:CellWidth, textAlign: item.numeric ? "right" : "left", paddingRight: item.sort && item.numeric ? "40px" : "",border:tablecellstyle }}
                             scope="row"

src/components/Material.Ui/Table/EnhancedTableHead.jsx

@@ -30,8 +30,11 @@ const EnhancedTableHead = (props) => {
         }}>
             <TableRow style={{...RowStyle}}>
                 {
-                    headCells.filter(k => k.id === "checkbox").length > 0 && <TableCell padding="checkbox">
+                    headCells.filter(k => k.id === "checkbox").length > 0 && <TableCell sx={{
+                        border: 'none'
+                      }} padding="checkbox">
                         <Checkbox
+                            sx={{ color: '#D1D6DE' }}
                             color={'primary'}
                             indeterminate={numSelected > 0 && numSelected < rowCount}
                             checked={rowCount > 0 && numSelected === rowCount}
@@ -42,6 +45,9 @@ const EnhancedTableHead = (props) => {
                 }
                 {headCells.map((headCell,k) => (
                         <TableCell
+                            sx={{
+                                border: 'none'
+                            }}
                             key={headCell.id}
                             style={{ width: headCell.width ? headCell.width : "", textAlign: headCell.numeric ? "right" : "left", display: headCell.id !== "checkbox" ? "" : "none" }}
                             padding={headCell.disablePadding ? "none" : "normal"}

src/views/Project/ProjectData/index.tsx

@@ -107,13 +107,13 @@ const ProjectData = () => {
   const renderButtons = (item: any) => {
     return (
       <span>
-        <Button variant="text" size="small">
+        <Button sx={{position: 'relative', left: '-18px'}} variant="text" size="small">
           下载
         </Button>
-        <Button variant="text" size="small">
+        <Button sx={{position: 'relative', left: '-18px'}} variant="text" size="small">
           移动至
         </Button>
-        <Button variant="text" size="small" color="error">
+        <Button sx={{position: 'relative', left: '-18px'}} variant="text" size="small" color="error">
           删除
         </Button>
       </span>
@@ -210,11 +210,6 @@ const ProjectData = () => {
             headCells={versionsHeadCells}
             nopadding={true}
             footer={false}
-            // elevation1={classes.elevation1}
-            tableStyle={{ minWidth: "auto" }}
-            borderBottom={"none"}
-            renderExpandPanel={(e: any) => <div>111111</div>}
-            // headTableCellCheckbox={classes.HeadTableCell}
           ></Table>
         </div>
         {selectIds.length > 0 && (