Can't add 'cursor: pointer' hover with JSS in React Typescript project

Question

I am trying to integrate a very simple hover effect (the cursor pointer browser standard behaviour) to start in a pre-existing React-Typescript project.

I've researched various ways to do this since React doesn't offer a way to do CSS hover styles out of the box with inline styling, and have settled on using the JSS.

In my package.json file in dependencies I have "react-jss": "^7.0.2" and "jss-preset-default": "^3.0.0"

In the relevant React-Typescript .tsx file I have import jss from 'jss'; and import preset from 'jss-preset-default'

To implement I have followed the example here: https://github.com/cssinjs/jss but I also have quite a bit of other code which I am inheriting from another developer in this file (which I hope is not conflicting in some way).

There is no error in the terminal or in the browser console. There is also no error in the editor's in-built React/typescript linter.

The only thing I can think is that it is something to do with my use of className in the JSX as strangely in the jss github doc they use as standard class in standard HTML.

Here's the full code below:

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

Answer 1

If you use JSS directly you just need this:

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

If you use withStyles or reactJss, you don't need to create a style sheet manually, you just pass the styles object.