如何将borderTop添加到React Material UI Table？

Posted 2023-02-22

【中文标题】如何将borderTop添加到React Material UI Table？

【英文标题】：How do I add borderTop to React Material UI Table?

【发布时间】：2018-10-26 16:18:57

【问题描述】：

我想在上面的表格中添加顶部边框。

我试过了

const styles = theme => 
    root :  borderTopWidth: 1, borderColor: 'red'


...

class TableComponent ...

 classes  = this.props; 

<Table className=classes.root>
</Table

export default withStyles(styles)(TableComponent)

我相信这不是语法问题，因为像background: 'red' working properly. 这样的其他选项也许我错过了一些东西。如何在此表中实现 topBorder？

【问题讨论】：

您是否尝试将单位添加到您的borderTopWidth？喜欢1px 而不是1。

@ChrisR React 足够聪明，可以默认添加像素。

【参考方案1】：

您忘记定义 borderStyle 属性

const styles = theme => 
    root :  borderTopWidth: 1, borderColor: 'red',borderStyle: 'solid' // or borderTop: '1px solid red'


...

class TableComponent ...

 classes  = this.props; 

<Table className=classes.root>
</Table

export default withStyles(styles)(TableComponent)

或者你可以添加像这样的内联样式

<Table style=borderTop: '1px solid red'>
</Table>

【参考方案2】：

@Shrroy 已经回答了这个问题。但我一直在努力解决如何只添加Right Border 而不是单元格中的任何其他边框。我将在这里分享它，假设它可能对其他人有帮助（@Shrroy 的回答有帮助）。同样，您可以使用上边框或任何其他组合（例如：仅右边框和左边框）。

如何在单元格的一侧添加边框。

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>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>
                        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);