@Shrroy已经回答了这个问题。但我一直在苦苦思索如何仅添加单元格中的右边框
而不是其他任何边框。我将在此分享它,假设它可能会帮助其他人(@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);
borderTopWidth
添加一个单位了吗?比如使用1px
而不是1
。 - ChrisR