Question

尽管使用useStyles()创建不同的道具，但可以像这样的元素来访问它们

const useStyles = makeStyles((theme) => ({
    title: {
        margin: theme.spacing(4, 0, 2)
    }
)

return (
    <Typography className={classes.title}>text</Typography>
)

但是，如果我尝试记录内容，它将返回一个字符串makeStyles-title-7

function App() {
    const classes = useStyles()
    console.log(classes.title)

如何访问其中存储的内容？如何正确记录它们？

Answer 1

Material-ui使用CSS-in-JS解决方案来编写组件样式，这有助于实现模块化并以声明性，无冲突且可重用的方式描述样式。

类名是自动生成的，因此它们本质上是唯一的，并且与全局CSS名称不冲突。这就是为什么这样做

console.log(classes.title)

它显示类似makeStyles-title-7

的值

样式定义将在运行时注入<head>元素中。（您也可以更改此行为）

您可以从此处了解更多有关JSS和各种可配置选项的信息-https://cssinjs.org/react-jss/?v=v10.1.1

从useStyles（）获取内容

1 个答案: