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

Question

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

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>
  );
}

Issue inside browser debugger

Answer 1

className="{classes.gridStyle}">

应该是

className={classes.gridStyle}>

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

Typescript/React/MaterialUI/JSS project: override CSS for a single React component

typescript

reactjs

material-ui

jss