Reactjs 如何添加borderTop以反应物料UI表？

我想做的是在上面的表格中添加上边框

我试过了

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

...

class TableComponent ...

{ classes } = this.props; 

<Table className={classes.root}>
</Table

export default withStyles(styles)(TableComponent)

constyles=theme=>{
根：{borderTopWidth:1，borderColor:'red'}
}
...
类TableComponent。。。
{classes}=this.props；
您忘记定义
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)

constyles=theme=>{
根：{borderTopWidth:1，borderColor:'red'，borderStyle:'solid'}//或borderTop:'1px solid red'
}
...
类TableComponent。。。
{classes}=this.props；
@施罗伊已经回答了这个问题。但我一直在苦苦思索如何在单元格中只添加
右边框
，而不添加任何其他边框。我将在这里分享它，假设它可能会帮助其他人（@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)

constyles=theme=>{
tableRightBorder:{borderWidth:0，borderWidth:1，borderColor:'red'，borderStyle:'solid'}//或borderTop:'1px solid red'
}
...
类TableComponent。。。
{classes}=this.props；
第1栏
第2栏
第1单元
第2单元
导出默认样式（样式）（TableComponent）

看起来是这样的。


要获得上图的完整工作组件，请尝试此表

从“React”导入React；
从“道具类型”导入道具类型；
从'@material ui/styles'导入{makeStyles}；
进口{
桌子
表体，
TableCell，
桌面，
TableRow，
}来自“@material ui/core”；
从'react redux'导入{connect}；
const useStyles=makeStyles（主题=>({
根：{}，
tableRightBorder：{
边框宽度：0，
borderRightWidth:1，
边框颜色：“黑色”，
边框样式：“实心”，
},
}));
const DataTable=props=>{
const classes=useStyles（）；
返回(
第1栏
第2栏
第1单元
第2单元
);
};
DataTable.propTypes={
类名：PropTypes.string，
};
函数mapStateToProps（）{}
导出默认连接（mapStateToProps，{}）（DataTable）；
您是否尝试将单位添加到您的
边框宽度
？像
1px
而不是
1
。@ChrisR的反应足够聪明，可以在默认情况下添加像素。
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)