0

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

我唯一能想到的是，这与我className在 JSX 中的使用有关，奇怪的是在他们用作标准 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);
4

1 回答 1

0

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

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

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

于 2017-09-07T14:17:04.153 回答