使用 Material UI 组件自定义 TableRow

Question

I'm using Material UI table example and trying to customize the rows to have my own component to replace the default row.I want to have some margin between the rows and a shadow (using elevation prop of Paper element). This is what I achieved so far:

import React, { useState } from 'react'
import Paper from '@material-ui/core/Paper';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';

const MyPaper = (item) => {
  return (
    <Paper
      elevation={6}>
      {item}
    </Paper>
  );
};

const List = () => {
  const items = ['a', 'b'];

  return (     
    <div style={{ maxWidth: "100%" }}>
      <TableContainer>
        <Table aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell>Dessert (100g serving)</TableCell>
              <TableCell align="right">Calories</TableCell>
              <TableCell align="right">Fat&nbsp;(g)</TableCell>
              <TableCell align="right">Carbs&nbsp;(g)</TableCell>
              <TableCell align="right">Protein&nbsp;(g)</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {items.map(item => (
              <TableRow key={item} component={() => MyPaper(item)}>
                <TableCell>{item}</TableCell>
                <TableCell>{item}</TableCell>
                <TableCell>{item}</TableCell>
                <TableCell>{item}</TableCell>
                <TableCell>{item}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  )
}

export default List

but the result is being applied only in the first column. How do I fix this to have my custom row to occupy the entire table space?

Thanks in advance

Answer 1

You can do it easily with withstyles property of Material-UI, you can arrange Paper or other MUI components to give them classes and arrange them in styles variable:

import React, { useState } from 'react'
import Paper from '@material-ui/core/Paper';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import { WithStyles } from '@material-ui/core'


const styles = theme => ({
...theme,
Row:  {
margin: 10 
      }
})

const List = () => {
  const items = ['a', 'b'];
  const {classes} = this.props
  return (     
    <div style={{ maxWidth: "100%" }}>
      <TableContainer>
        <Table aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell>Dessert (100g serving)</TableCell>
              <TableCell align="right">Calories</TableCell>
              <TableCell align="right">Fat&nbsp;(g)</TableCell>
              <TableCell align="right">Carbs&nbsp;(g)</TableCell>
              <TableCell align="right">Protein&nbsp;(g)</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {items.map(item => (
              <TableRow key={item} className={classes.Row}>
                <TableCell>{item}</TableCell>
                <TableCell>{item}</TableCell>
                <TableCell>{item}</TableCell>
                <TableCell>{item}</TableCell>
                <TableCell>{item}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  )
}

export default withStyles(styles)(List)