Reactjs 无法将故事书中的道具作为材质UI变量传递

我正在react中处理材质UI，并使用storybook创建组件库。我有两个文件，分别是Typography.js和Typography.stories.js

在Typography.js内部：我使用了Material ui core中的makestyles挂钩，并声明了样式h1。我计划声明更多样式（h2、h3、h4…）。我想将样式作为一个道具从Typography.stories.js中传递

在本例中，我希望Typography.js中的Typography标记的classname为classname={classes.h1}。我将h1作为名为variant（ie variant=“h1”）的道具从Typography.stories.js中传递，并将其作为className={

classes.${variant}

}编写。
然而，它似乎不是这样工作的。class.h1直接工作正常，但我无法通过h1作为道具

Typogrphy.js：

import React from 'react'
import {makeStyles} from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'

const useStyles = makeStyles({
global:{
    color:'#000000'
},
h1:{
   fontSize: '48px',
   fontWeight: 400
}
});

function Typographys(props) {
const classes = useStyles();
const{variant,children,...rest} = props;

return (
    <>
    <Typography className = {`classes.${variant}`}>{children}</Typography>
    </>
)
}

export default Typographys

从“React”导入React
从“@material ui/core/styles”导入{makeStyles}
从“@material ui/core/Typography”导入排版
const useStyles=makeStyles({
全球：{
颜色：'#000000'
},
h1：{
fontSize:'48px'，
体重：400
}
});
功能字体（道具）{
const classes=useStyles（）；
const{variant，children，…rest}=props；
返回(
{儿童}
)
}
导出默认字体

印刷术.stories.js

import React from 'react'
import Typography from './Typographys'

export default{
title: 'Typography',
component: Typography
}

const Template = args => <Typography {...args} />

export const Headline1 = Template.bind({});

Headline1.args = {
variant: 'h1',
children: 'Headline 1'
}

从“React”导入React
从“./Typographys”导入排版
导出默认值{
标题：“排版”，
组成部分：排版
}
常量模板=args=>
export const Headline1=Template.bind（{}）；
标题行1.args={
变体：“h1”，
儿童：“标题1”
}