Невозможно добавить наведение курсора: указатель с помощью JSS в проекте React Typescript

Я пытаюсь интегрировать очень простой эффект наведения (стандартное поведение браузера указателя курсора) для запуска в уже существующем проекте React-Typescript.

Я исследовал различные способы сделать это, поскольку React не предлагает способ делать стили наведения CSS из коробки с встроенными стилями и остановился на использовании JSS.

В моем package.json файле в зависимостях есть "react-jss": "^7.0.2" и "jss-preset-default": "^3.0.0"

В соответствующем файле React-Typescript .tsx у меня есть import jss from 'jss'; и import preset from 'jss-preset-default'

Для реализации я последовал примеру, приведенному здесь: https://github.com/cssinjs/jss, но у меня также есть довольно много другого кода, который я унаследовал от другого разработчика в этом файле (который, я надеюсь, не противоречит каким-либо образом).

Нет ошибки ни в терминале, ни в консоли браузера. Также нет ошибок во встроенном в редактор линтере React / typescript.

Единственное, что я могу думать, это то, что это как-то связано с тем, что я использовал className в JSX, как это ни странно в jss github doc, который они используют как стандартный класс в стандартном HTML.

Вот полный код ниже:

import * as React from 'react';
import Link from '../../lib/support/Link';
import Grid from 'material-ui/Grid';
import ODPaper from '../ui/ODPaper';
import Typography from 'material-ui/Typography';
import {MakerPresenter} from '../../lib/presenters/MakerPresenter';
import {StyleRulesCallback, withStyles} from 'material-ui/styles';
import ODAvatar from '../ui/ODAvatar';
import jss from 'jss';
import preset from 'jss-preset-default'

jss.setup(preset())

const styleSheet: StyleRulesCallback = (theme: any) => ({
  item: {
    minheight: 65
  }
});

const bkgroundTxt = {
  backgroundColor: '#9b9b9b',
  color: '#fff',
  padding: '5px',
  textAlign: 'center'
}

const extraStyles = {
  customLink: {
    '&:hover': {
      cursor: 'pointer'
    }
  }
}

const {extraClasses} = jss.createStyleSheet(extraStyles).attach()

interface IProps {
  maker: MakerPresenter;
  distanceInKm?: number;
}

interface IStyles {
  item: string;
}

// const MakerItemHeaders =

const MakerListItem = ({maker, distanceInKm, classes}: IProps & {classes: IStyles}) =>

  // {MakerItemHeaders}

  <ODPaper>
    <Link as={maker.href} href={`/makers/show?id=${maker.id}`}>
      <Grid className="${extraClasses.customLink}" container align="center">

        <Grid item xs={2}>
          <Typography component="span">{maker.name}</Typography>
        </Grid>

        <Grid item xs={3}>
          <Typography>{maker.prettyAddress}</Typography>
        </Grid>

        <Grid item xs={2}>
          <Typography>Jobs complete: {maker.numJobs}</Typography>
        </Grid>

        <Grid item xs={2}>
          <Typography>QA issues: {maker.numQAIssues}</Typography>
        </Grid>

        <Grid item xs={2}>
          <Typography style={bkgroundTxt} >{maker.onboardedStatus}</Typography>
        </Grid>

          <Grid item xs={3}>
            <Typography>Data Missing: {maker.dataMissing}</Typography>
          </Grid>

        <Grid item xs={3}>
          <Typography>
            { (typeof distanceInKm !== 'undefined') && `Distance (km): ${distanceInKm}`}
          </Typography>
        </Grid>

      </Grid>
    </Link>
  </ODPaper>;

export default withStyles<IProps>(styleSheet)(MakerListItem);