react material ui table 行样式设置
时间: 2024-01-06 21:05:56 浏览: 23
在React Material UI中,可以使用`makeStyles`或`withStyles`函数来设置表格行的样式。以下是一个示例:
```jsx
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles(theme => ({
tableRow: {
backgroundColor: '#f5f5f5',
'&:hover': {
backgroundColor: '#e0e0e0',
},
},
}));
function MyTable() {
const classes = useStyles();
return (
<Table>
<TableBody>
{rows.map(row => (
<TableRow key={row.id} className={classes.tableRow}>
<TableCell>{row.name}</TableCell>
<TableCell>{row.age}</TableCell>
<TableCell>{row.email}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
);
}
```
在上面的示例中,`makeStyles`函数定义了一个名为`tableRow`的样式类,用于设置表格行的背景颜色和鼠标悬停时的背景颜色。然后,在表格行的`className`属性中使用该样式类即可。