Question

有一个好的方法吗？我在找路... 但是，我无法获得可靠的信息。 https://material-ui.com/ja/components/tables/

Answer 1

在material-ui表上方创建一个具有唯一className的div，然后在CSS中进行以下更改

eg:
<div className="uniqueName">
   <Material UI Table/>  //material ui table here
</div>
in Css

.uniqueName th,
td {
  border: 1px solid rgba(224, 224, 224, 1);
}

Answer 2

这不是常规做法，但可以解决问题。我通过在每个<TableCell>组件周围添加边框来实现这一点。您还可以包装<TableRow>或<TableHead>组件。下面给出了一个如何在单元格上添加Right Border的示例。如果需要中间垂直线，则在第一列的所有Right Border上添加<TableCell>。

const styles = theme => {
    tableRightBorder : { borderWidth: 0, borderWidth: 1, borderColor: 'red',borderStyle: 'solid'} // or borderTop: '1px solid red'
}

...

class TableComponent ...

{ classes } = this.props; 

<Table >
    <TableHead>
        <TableRow >
            <TableCell className={classes.tableRightBorder}>Column 1</TableCell>
            <TableCell>Column 2</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
        <TableRow>
            <TableCell className={classes.tableRightBorder}>Cell 1</TableCell>
            <TableCell>Cell 2</TableCell>
        </TableRow>
    </TableBody>
</Table>

export default withStyles(styles)(TableComponent)

这看起来像这样...

有关上图的完整工作组件，请尝试此表

import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/styles';

import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
} from '@material-ui/core';
import { connect } from 'react-redux';

const useStyles = makeStyles(theme => ({
    root: {},
    tableRightBorder: {
        borderWidth: 0,
        borderRightWidth: 1,
        borderColor: 'black',
        borderStyle: 'solid',
    },
}));

const DataTable = props => {
    const classes = useStyles();

    return (
        <Table>
            <TableHead>
                <TableRow>
                    <TableCell className={classes.tableRightBorder}>
                        Column 1
                    </TableCell>
                    <TableCell>Column 2</TableCell>
                </TableRow>
            </TableHead>
            <TableBody>
                <TableRow>
                    <TableCell className={classes.tableRightBorder}>
                        Cell 1
                    </TableCell>
                    <TableCell>Cell 2</TableCell>
                </TableRow>
            </TableBody>
        </Table>
    );
};

DataTable.propTypes = {
    className: PropTypes.string,
};

function mapStateToProps() {}

export default connect(mapStateToProps, {})(DataTable);

Answer 3

我喜欢这样做；用样式包装组件并将其用作新组件：

const CellWithRightBorder = withStyles((theme: Theme) => 
  createStyles({
    root: {
      borderRightWidth: 1,
      borderRightColor: theme.palette.grey[300],
      borderRightStyle: "solid",
    },
  })
)(TableCell);


const MyTable = () => {
  <TableContainer component={Paper}>
    <Table size="small" aria-label="a dense table">
      <TableHead>
        <TableRow>
          <CellWithRightBorder>Bla</CellWithRightBorder>
        </TableRow>
      </TableHead>
    </Table>
  </TableContainer>
}

我正在寻找如何在材料ui的表格组件上绘制垂直线

3 个答案: