无法在 React Typescript 项目中使用 JSS 添加“光标：指针”悬停

Question

我正在尝试集成一个非常简单的悬停效果（光标指针浏览器标准行为）以在预先存在的 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 linter 也没有错误。

我唯一能想到的是，这与我在 JSX 中使用 className 有关，奇怪的是它们在标准 HTML 中用作标准类的 jss github doc。

下面是完整的代码：

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

如果你直接使用 JSS，你只需要这个：

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

如果使用 withStyles 或 reactJss，则无需手动创建样式表，只需传递样式对象即可。