Reactjs Typescript/React/MaterialUI/JSS项目：覆盖单个React组件的CSS

我试图理解如何在Typescript/React/MaterialUI/JSS项目中为单个React组件重写CSS/formatting/theme。下面是代码，但是JSX中的{classes.gridStyle}没有得到处理（请参见代码片段下面的屏幕截图）。我可以看到它在浏览器调试器中显示为未修改，typescript编辑器也给了我一个警告，变量“classes”从未使用过

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Grid, createStyles } from '@material-ui/core';

const useStyles = makeStyles(() =>
  createStyles({
    gridStyle: {
      display: 'inline-block',
      padding: '0 20px',
      height: '40px',
    },
    '& div': {
      display: 'inline-block',
      fontSize: '10px',
      padding: '0 20px',
      height: '40px',
    },
  })
);

export default function HomeHeader(): JSX.Element {
  const classes = useStyles();
  return (
    <Grid item className="{classes.gridStyle}">
      Row 1 completely override css experiment...
    </Grid>
  );
}

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core”导入{Grid，createStyles}；
const useStyles=makeStyles（（）=>
创建样式({
网格样式：{
显示：“内联块”，
填充：“0 20px”，
高度：'40px'，
},
“&div”：{
显示：“内联块”，
fontSize:'10px'，
填充：“0 20px”，
高度：'40px'，
},
})
);
导出默认函数HomeHeader（）：JSX.Element{
const classes=useStyles（）；
返回(
第1行完全覆盖css实验。。。
);
}

应该是

className={classes.gridStyle}>
 

className={classes.gridStyle}>