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但我还有很多其他代码，我从这个文件中的另一个开发人员继承（我希望在某种程度上没有冲突）。 / p>

终端或浏览器控制台中没有错误。编辑器内置的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，则无需手动创建样式表，只需传递样式对象。

无法在React Typescript项目中添加'cursor：pointer'与JSS一起悬停

1 个答案: