从 useStyles() 获取内容

【问题标题】：Getting contents from useStyles()从 useStyles() 获取内容
【发布时间】：2020-04-16 05:35:22
【问题描述】：

虽然使用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)

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

【问题讨论】：

标签： reactjs material-ui

【解决方案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

【讨论】：