英文:
Why am I getting classes undefined error?
问题
I'm new to React, can someone explain to me why I am getting classes undefined error?
我是React新手，可以有人解释一下为什么我会收到未定义的classes错误？
Below is the code
以下是代码
const styles = (theme) => ({
root: {
width: "100%",
marginTop: theme.spacing.unit * 3,
overflowX: "auto"
},
table: {
minWidth: 700
},
tableRow: {
"&.Mui-selected, &.Mui-selected:hover": {
backgroundColor: "purple",
"& > .MuiTableCell-root": {
color: "yellow"
}
}
}
});
export default function MyTable(props) {
const { classes } = props;
return (
<div>
<Box>
<TableContainer component={Paper}>
<Table className={classes.table}>
I'm getting uncaught runtime errors from classes.table because it's undefined. What did I do wrong?
我从classes.table中收到未捕获的运行时错误，因为它是未定义的。我做错了什么？
英文:
I'm new to React, can someone explain to me why I am getting classes undefined error?
Below is the code
const styles = (theme) => ({
root: {
width: "100%",
marginTop: theme.spacing.unit * 3,
overflowX: "auto"
},
table: {
minWidth: 700
},
tableRow: {
"&.Mui-selected, &.Mui-selected:hover": {
backgroundColor: "purple",
"& > .MuiTableCell-root": {
color: "yellow"
}
}
}
});
export default function MyTable(props) {
const { classes } = props;
return (
<div>
<Box>
<TableContainer component={Paper}>
<Table className={classes.table}>
I'm getting uncaught runtime errors from classes.table because it's undefined. What did I do wrong?
答案1
得分: 1
// 请注意，在注释中提到，您没有将`classes`属性传递给`MyTable`组件。这就是为什么您无法从`props`解构`classes`并得到`undefined`的原因。
// 您可以使用`@material-ui/core/styles`中的`makeStyles`和`createStyles`函数。
import { makeStyles, createStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: "100%",
marginTop: theme.spacing.unit * 3,
overflowX: "auto",
},
table: {
minWidth: 700,
},
tableRow: {
"&.Mui-selected, &.Mui-selected:hover": {
backgroundColor: "purple",
"& > .MuiTableCell-root": {
color: "yellow",
},
},
},
})
);
// 现在您可以在组件中使用`useStyles`钩子来获取这些类。
export default function MyTable(props) {
const classes = useStyles();
return (
<div>
<Box>
<TableContainer component={Paper}>
<Table className={classes.table}>
...
</Table>
</TableContainer>
</Box>
</div>
);
}
查看MUI v4 styles basics获取更多信息。
英文:
As mentioned in the comments you're not passing a classes property to the MyTable component. This is why you can't destructure classes from props and get undefined.
You can use the makeStyles and createStyles functions from @material-ui/core/styles.
import { makeStyles, createStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: "100%",
marginTop: theme.spacing.unit * 3,
overflowX: "auto",
},
table: {
minWidth: 700,
},
tableRow: {
"&.Mui-selected, &.Mui-selected:hover": {
backgroundColor: "purple",
"& > .MuiTableCell-root": {
color: "yellow",
},
},
},
})
);
Now you can use the useStyles hook in your component to get the classes.
export default function MyTable(props) {
const classes = useStyles();
return (
<div>
<Box>
<TableContainer component={Paper}>
<Table className={classes.table}>
...
</Table>
</TableContainer>
</Box>
</div>
);
}
See MUI v4 styles basics for more information.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论