React Typescript 프로젝트에서 JSS로 '커서 : 포인터'호버를 추가 할 수 없습니다.

기존의 React-Typescript 프로젝트에서 시작하는 아주 간단한 호버 효과 (커서 포인터 브라우저 표준 비헤이비어)를 통합하려고합니다.React Typescript 프로젝트에서 JSS로 '커서 : 포인터'호버를 추가 할 수 없습니다.

React가 인라인 스타일을 사용하여 CSS 마우스 오버 스타일을 구현하는 방법을 제공하지 않고 JSS를 사용하여 해결했기 때문에 여러 가지 방법을 연구했습니다. https://github.com/cssinjs/jss하지만 I : 내가 "react-jss": "^7.0.2"과 관련 반작용-타이프 라이터 .tsx 파일에서

"jss-preset-default": "^3.0.0"이 종속 내가 여기에 예를 따랐다 구현하려면 import jss from 'jss'; 및

import preset from 'jss-preset-default'을 내 package.json 파일에서

이 파일에서 다른 개발자로부터 상속 받고있는 다른 코드도 있습니다 (어떤 점에서라도 충돌하지 않기를 바랍니다).

터미널이나 브라우저 콘솔에 오류가 없습니다. 에디터에 내장 된 React/typescript linter에도 오류가 없습니다.

내가 생각할 수있는 유일한 점은 표준 HTML에서 표준 클래스로 사용하는 jss github 의사가 이상하게도 JSX에서 className을 사용하는 것과 관련이 있다는 것입니다. 당신이 withStyles 또는 reactJss를 사용하는 경우

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

것은, 당신이 스타일을 만들 필요가 없습니다 : 당신은 JSS를 사용하는 경우

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

출처

2017-09-07 daneasterman