@cfilipov 당신이 사용하는 구성 요소 클래스를한다 장식 할 때 StyledComponentProps 대신 WithStyles , 그리고 엄격한 타입 검사 모드에서 당신은 null이 아닌 주장 연산자를 사용해야 할 경우 ! 추출물에을 classes 의 필드 이것은 withStyles 를 클래스 데코레이터로 사용할 수 있도록 하는 절충안입니다. TypeScript의 클래스 데코레이터는 반환 유형이 인수 유형과 일치해야 한다는 제한 이 있습니다. 이 제한 사항이 있는 경우 한 가지 옵션만 가능합니다.

1. withStyles 를 클래스 데코레이터로 사용하는 것을 지원하지 않습니다.
2. 장식된 구성 요소 유형의 요소를 구성할 때 더미 classes 소품을 전달하도록 요구합니다(이전 절충안은 틀림없이 더 짜증났음 )
3. classes 가 구성 요소 내에서 nullable로 간주되도록 요구하여 해당 필드에 액세스할 때 ! 연산자를 사용해야 합니다( 현재 타협 ).

구성 요소에 상태가 없는 경우 상태 비저장 기능 구성 요소를 사용하는 것이 좋습니다. 그러면 유형 주석이 더 적게 필요하고 유형이 더 안전합니다.

export default withStyles(styles)<Props>(({ classes, message }) => (
  <div className={classes.main}>
    <div className={classes.foo}>
      Hello World! {message}
    </div>
  </div>
));

내가 언급을 참조하십시오 여기에 내가보기 흉한 해킹 생각하는 <> 부분의 사용을.

해당 댓글에 대한 내 후속 조치를 읽으면 Partial<> 가 필요하지 않다는 것을 알 수 있습니다.

해당 댓글에 대한 내 후속 조치를 읽으면 Partial<>이 필요하지 않다는 것을 알 수 있습니다.

Partial<> 에 대한 귀하의 의견을 보았습니다. StyledComponentProps 를 사용하는 것은 본질적으로 동일한 것과 같습니다(해당 정의에서 Partial<> 하고 있음). 내 불만은 이제 클래스 이름에 ! 로 액세스해야 한다는 것입니다(당신이 언급했듯이). 더미 classes 소품을 전달하거나 ! 사용하도록 요구하는 것은 둘 다 좋지 않은 절충안이라고 생각합니다.

명확히 하자면, 여기서 제가 겪고 있는 근본적인 문제는 typescript의 실험적 기능 의 한계를 해결하기 위한 노력으로 임시에 회귀를 도입하는 선택이라고 생각합니다. 나는 데코레이터에 관심이 없기 때문에 약간의 편견을 인정하지만 다른 사람들은 분명히 신경 쓰지만 여기에서의 절충안은 나에게 의미가 없습니다.

@cfilipov withStyles 타이핑의 첫 번째 리팩터 는 옵션 (1)을 선택하는 것이었습니다. 즉, withStyles 를 클래스 데코레이터로 사용하는 대신 클래스 및 함수 구성 요소 모두에 대해 타이핑을 완전히 올바르게 만드는 것입니다. . 그런 다음 데코레이터 구문을 사용하는 것이 인기 있는 요청이라는 피드백 을 받아 옵션 (3)으로 전환했습니다. 그 결정을 다시 보게 되어 기쁩니다. 나도 현재 반기능 상태에서 데코레이터를 지원하는 것보다 유형 안전성을 선호합니다.

네, 이런 인기 있는 요청을 지원하고 싶은 마음은 이해합니다. 나도 데코레이터를 사용 하고 싶지만 (mui 외부) 할 때마다 데코레이터와 관련된 많은 문제가 계속 발생하므로 개인적으로 준비될 때까지 사용하지 않기로 결정했습니다.

당신이 내 관심사를 공유하는 것처럼 들리고 더 이상 추가할 것이 없으므로 다른 사람들이 이 방향으로 피드백을 제공하여 영향을 줄 수 있기를 바랍니다.

나는 beta.10에서 beta.13으로 전환하여 변경된 사항이 있는지 확인했으며 예, 이것은 실제 문제입니다. 여기에 내 2센트를 던지기 위해 데코레이터는 실험적입니다. 그들은 분명히 미래에 바뀔 수 있습니다. 그리고 그때까지 100% 정확한 방법을 전적으로 지지합니다. 나는 일을 작동시키기 위해 내 유형을 해킹하는 데 일관성 있는 유형 안전을 훨씬 더 선호합니다.

8550은 사람들이 이것에 대해 혼란스러워한다는 추가 증거처럼 보이며, 우리는 @withStyles() 를 (TypeScript에서) 데코레이터로 지원하지 않는 것을 고려해야 합니다.

타이핑을 올바르게 했다면 클래스를 "장식"하는 모습은 다음과 같습니다.

type NonStyleProps = {
  text: string
};

const styles = {
  root: {
    backgroundColor: 'red'
  }
};

const DecoratedComponent = withStyles(styles)(
  class extends React.Component<NonStyleProps & WithStyles<'root'>> {
    render() {
      return (
        <div className={this.props.classes.root}>
          {this.props.text}
        </div>
      );
    }
  }
);

@pelotom 이 문제 때문에 아직 beta.10에서 앞으로 나아가지 못하고 있습니다. 이전에 Redux의 connect 메소드를 사용한 클래스 스타일에 대해 언급한 적이 있습니다. 상대적으로 쉽고 강력하다고 생각합니다. #8059에서 세 번째 주석은 유형에 대한 나 자신입니다.

@pelotom 이 문제에 대해 알려주셔서 감사합니다. 저는 TS 데코레이터를 많이 사용하지만, 그런 경우에는 withStyles 가 더 나은 유형 안전성을 위해 데코레이팅 지원을 중단하게 되어 기쁩니다.

@withStyle()을 (TypeScript에서) 데코레이터로 지원하지 않는 것을 고려해야 합니다.

@pelotom 저는 개인적으로 이 변화에 찬성합니다. @sebald 여기서 무엇을 하고

간단한 변경입니다. 혹시라도 함께 가실 분들을 위해 PR을 열었어요 🙂

@pelotom 이렇게 사용하면 타이핑이 계속 작동할까요?

interface IStyles {
    // styles interface
}
interface IHeaderInfoStyles {
    classes: any;
}
interface IHeaderInfoProps {
    // properties resulting from dispatches
}
interface IHeaderInfoInjectedProps {
   // props injected from parent if any
}
interface IHeaderInfoDispatchProps {
    // dispatches
}
interface IHeaderInfoState {
    // your state for the class
}

type HeaderInfoProps = IHeaderInfoProps & IHeaderInfoInjectedProps & IHeaderInfoDispatchProps & IHeaderInfoStyles;

class HeaderInfo extends Component<HeaderInfoProps, IHeaderInfoState> {

export const HeaderInfo_container = withStyles<IHeaderInfoInjectedProps, IStyles>(styles)(
    connect<IHeaderInfoProps, IHeaderInfoDispatchProps, (IHeaderInfoInjectedProps & IHeaderInfoStyles)>(mapStateToProps, mapDispatchToProps)(HeaderInfo),
);

@marcusjwhelan withStyles 는 더 이상 2개의 유형 매개변수를 사용하지 않으며 스타일에 대한 유형 매개변수를 제공할 필요가 없습니다( styles 에서 유추할 수 있음). 대신 쓸 수 있어야 합니다.

withStyles(styles)<NonStyleProps>(...);

mapStateToProps 및 mapDispatchToProps 대한 유형을 제공하면 귀하의 예에서 이것이 어떻게 보이는지 보여줄 수 있습니다.

헐; 박사; 변경을 하고 반발이 어떤지 봅시다 👷🏻

@oliviertassinari @pelotom ¯_(ツ)_/¯ 저는 데코레이터를 사용하지 않기 때문에 개인적으로 이 변경에 대해 별로 신경 쓰지 않습니다. 영향을 받지 않기 때문입니다. 하지만 많은 사람들이 이 "기능"에 신경을 쓰는 것 같습니다. 그것이 우리가 처음에 그것을 추가한 이유입니다. 여기에서 우선 순위가 높은 것은 IMHO입니다.

withStyles 의 변경 사항에 매우 만족하지만 ramda 또는 recompose 와 같은 더 기능적인 다른 라이브러리를 살펴보면 타이핑이 그렇게 엄격하지 않습니다. 둘 다 유형 안전하지 않습니다. 종종 함수의 반환 값을 나타내는 제네릭을 전달해야 합니다. 예쁘지는 않지만 99.9%의 사용자에게 적합합니다.

데코레이터를 사용하는 사람들에게 효과가 있었던 오래된 타이핑을 다시 가져올 수 없는 이유는 무엇입니까? 두 개의 제네릭이 있기 때문에 두 입력을 나란히 가질 수 있습니다.

또한 데코레이터와 관련된 사람들의 문제가 무엇인지 약간 혼란스럽습니다("작동하지 않음" 관련). Angular 및 https://nestjs.com/ 과 같은 라이브러리는 결국 이를 많이 사용합니다. 우리의 경우 사람들은 소품에 WithStyles 를 추가하면 됩니다.

@sebald

데코레이터를 사용하는 사람들에게 효과가 있었던 오래된 타이핑을 다시 가져올 수 없는 이유는 무엇입니까? 두 개의 제네릭이 있기 때문에 두 입력을 나란히 가질 수 있습니다.

무슨 말씀이신지 잘 모르겠습니다. 사람들이 데코레이터를 고통 없이 사용할 수 있는 타이핑은 없었습니다. 첫 번째 구현은 더미 classes 소품(예: <StyledComp classes={{} as any} /> 을 전달하지 않고 장식된 구성 요소의 요소를 구성할 수 없다는 #8267로 인해 어려움을 겪었습니다. 두 번째(현재) 구현은 classes 가 구성 요소 클래스 내에서 잠재적으로 undefined 로 간주되는 반대의 문제로 어려움을 겪습니다. 현재 형식으로 TypeScript 데코레이터를 사용하려면 이 두 가지 옵션만 있으면 됩니다. 당신의 독을 선택하십시오.

세 번째 방법은 올바른 유형을 사용하여 classes 가 클래스 내에서 정의되지만 소품으로 전달할 필요가 없도록 하는 것입니다. 이 두 가지 조건을 모두 갖추려면 데코레이터를 포기해야 합니다.

@pelotom 네, 죄송합니다. 네가 옳아. 진짜 내날은 아닌데... 🤐 그럼 병합하자!

@sebald

또한 데코레이터와 관련된 사람들의 문제가 무엇인지 약간 혼란스럽습니다("작동하지 않음" 관련). Angular 및 https://nestjs.com/ 과 같은 라이브러리는 결국 이를 많이 사용합니다.

Angular에서 어떻게 사용되는지 잘 모르겠지만 데코레이터를 쉽게 사용할 수 있는 사용 사례는 분명히 있습니다. 기본적으로 데코레이터가 꾸미고 있는 클래스의 유형을 변경할 필요가 없다면 제대로 작동합니다. 우리가 처한 상황은 그렇지 않습니다. withStyles 는 장식하는 구성 요소의 유형을 변경해야 합니다.

@pelotom 네, 맞습니다. 나쁜 것은 돌연변이 일뿐입니다. 실제로, TS가 현재 데코레이터를 구현하는 방식은 Angular 사용자에게도 좋을 수 있습니다. 데코레이터 AFAIK는 "이 클래스를 구성 요소로 등록" 또는 "DI에서 사용할 수 있도록 메타 데이터 추가"와 같이 프레임워크와 계약을 설정하기 때문입니다. " ... 신이 나서 쓰기만 해도 기분이 좋아지네요 🤢

@pelotom 내가하는 방식으로 유형을 사용하는 이유는 내 구성 요소에 유형 안전성을 제공했기 때문입니다. 현재 유형에는 구성 요소와 관련하여 유형 안전이 없습니다. 내 예제의 injectionProps 는 구성 요소가 작동하는 데 필요한 유형입니다. react-redux 연결 유형은 mapStateToProps 에서 오는 Props 및 mapDispatchToProps 에서 오는 DispatchProps 의 유형이어야 합니다.

맨 끝에서 내 부모 구성 요소가 내가 삽입해야 하거나 내 프로젝트가 컴파일되지 않는다는 것을 알 수 있도록 injectionProps 가 있어야 합니다. (이것이 내가 원하는거야). 이 변경 사항이 이러한 종류의 typeSafety로 다시 마이그레이션됩니까?

@marcusjwhelan 다시, 베타 10에서 컴파일된 전체(그러나 최소한의) 예제를 제공할 수 있다면 마이그레이션 방법을 보여드릴 수 있습니다. AFAIK 새 버전은 이전보다 모든 부분에서 표현력이 풍부하고 유형이 안전해야 합니다.

@pelotom 어리석은 질문, 새 릴리스가 완료되면 알림을 받을 수 있는 방법이 있습니까?

@wcandillon 트위터에서 팔로우하세요.

@pelotom 위에 예시를

편집하다

나는 그것을 알아.

이 토론을 조금 늦게 시작했지만 여기에서 언급한 것과 유사한 오류가 발생했으며 이를 수정할 수 있는 방법을 아직 결정하지 못했습니다. [email protected] 및 [email protected] 있습니다.

const LoginForm = withStyles(styles)(
    class extends React.Component<WithStyles<'root' | 'button'>, ILoginFormState> {
    // ...
    }
);

render(
  <MuiThemeProvider theme={theme}>
    <LoginForm />
  </MuiThemeProvider>,
  document.getElementById('login-form')
);

이 특별한 경우에 나타나는 오류 메시지는 다음과 같습니다.

Type '{}' is not assignable to type 'IntrinsicAttributes & WithStyles<"root" | "button"> & StyledComponentP...'.
  Type '{}' is not assignable to type 'WithStyles<"root" | "button" | "progress" | "textField">'.
    Property 'classes' is missing in type '{}'.
 not assignable to type 'WithStyles<"root" | "button" | "progress" | "textField">'.
    Property 'classes' is missing in type '{}'.

구성 요소 클래스를 장식할 때 WithStyles 대신 StyledComponentProps를 사용해야 합니다.

@pelotom - 어딘가에 이것의 예가 있습니까? TypeScript에서 상태 저장 구성 요소 클래스의 스타일을 지정하는 방법을 결정하는 데 많은 문제가 있습니다.

@iamjem 당신이 제공되지 않았기 때문에 말하는 건 좀 어렵다 styles ,하지만 첫 번째 문제는 당신이 언급 한 더 클래스 키를 가지고있다 것 같습니다 styles 당신이 언급하는 것보다 WithStyles<...> . 로 바꾸시면 될 것 같아요

const LoginForm = withStyles(styles)(
    class extends React.Component<WithStyles<keyof typeof styles>, ILoginFormState> {
    // ...
    }
);

첫 번째 문제를 처리해야 합니다. 그런 다음 두 번째 문제가 있는 것 같습니다. LoginForm 의 결과 유형은 다음과 같습니다.

React.ComponentType<WithStyles<"root" | "button"> & StyledComponentProps<"root" | "button">>

이것은 분명히 옳지 않습니다. non-style props의 부재가 타입 시스템을 혼란스럽게 하는 것처럼 보입니다. {} 를 유형 인수로 전달하여 스타일이 아닌 props가 무엇인지 명시적으로 설명하면 도움이 될 수 있습니다.

const LoginForm = withStyles(styles)<{}>( // <-- note the type argument
    class extends React.Component<WithStyles<keyof typeof styles>, ILoginFormState> {
    // ...
    }
);

너무 복잡해서 죄송합니다. 이 작업을 더 쉽게 수행할 수 있는 방법을 알고 싶습니다!

그 트릭을 했다! 빠른 도움을 주셔서 감사합니다 @pelotom. 나는 오랫동안 React를 사용해 왔지만 최근에 Material-ui에 뛰어들었고, 사용하는 동안 Typescript를 사용해 보고 싶다고 생각했습니다. 말할 필요도 없이 Typescript를 행복하게 만드는 방법을 말하기 어려운 몇 가지 극단적인 경우가 있습니다.

나는 재구성을 사용하여 해결했다.

예시

import { StyleRules, Theme, withStyles } from "material-ui/styles";
import * as React from "react";
import { compose } from "recompose";

interface IProps {
    classes?: any; // <-- add question mark
    text: string;
}

const styles = (theme: Theme): StyleRules => ({
    root: {

    },
});

@compose(
    withStyles(styles),
)
export class MyComponent extends React.Component<IProps> {
    render() {
        const { classes, text } = this.props;
        return (
            <div className={classes.root}>
                {text}
            </div>
        );
    }
}

나는 지난 며칠 동안 명확한 결과 없이 이 문제(및 #8704)로 싸우고 있었습니다. 그런 다음 @pelotom 의 조언을

당신은 사용해야 StyledComponentProps 대신 WithStyles

이 문제를 해결하는 유사한 방법을 GitHub에서 검색했습니다. 그리고 하나의 작동 예를 찾았습니다 😂. 그래도 좋은 방법이고 내 문제를 해결했습니다. TypeScript가 행복한 쿠키인 별도의 컨테이너와 구성 요소: 여기에 언급된 예 ( 참고: 제 경우 구성 요소 매핑은 별도의 컨테이너 파일에 있지만 아이디어는 같은.).

누군가 이것이 나쁜 해결책이라고 생각한다면 나는 어떤 변화와 아이디어에도 열려 있습니다. 지금은 내 코드가 불평을 멈춘 것 같아 기쁩니다.

type Styles = 'foo';
const styles: StyleRulesCallback<Styles> = (theme: Theme) => ({
    foo: {
        position: 'relative',
    }
});

interface Props {
  something: string;
}

class Sidebar extends React.Component<Props & WithStyles<Styles>> {
    render() {
        const { classes, something } = this.props;

        return (
                    <div className={classes.foo}>{something}</div>
        );
    }
}

export default withStyles(styles)<Props>(Sidebar);

새 문제를 만들고 싶지는 않지만 문서, 예에서 본 모든 것을 시도하고 재구성을 사용하여 문제를 전달했지만 일부 속성을 추가하면 구성 요소가 작동하도록 만들 수 없습니다.
그리고 내가 찾은 리소스는 대부분 이전 버전의 TS, MUI 또는 React와 함께 있습니다.

내 구성 요소는 다음과 같습니다.

import React from 'react';
import AppBar from 'material-ui/AppBar';
import { withStyles, WithStyles, StyleRulesCallback } from 'material-ui/styles';

const styles: StyleRulesCallback<'positionFixed'> = () => ({
  positionFixed: {
    top: 'auto',
    bottom: 0,
  },
});

const decorate = withStyles(styles);

interface Props {
   someProp: string;
};

export const BottomNav = decorate<Props>(
  class extends React.Component<Props & WithStyles<'positionFixed'>, {}> {
    render() {
      return (
        <AppBar />
      );
    }
  }
);

export default BottomNav;

그리고 오류는 다음과 같습니다.

TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & Props & StyledComponentProps<"positionFixed"> & { children?: ReactNode; }'.
  Type '{}' is not assignable to type 'Props'.
    Property 'someProp' is missing in type '{}'.

저는 TS의 초보자이지만 설명서 페이지 와 예제가 매우 혼란스럽거나 완전하지 않다는 것을 알았습니다.

혹시 아시는분 계시면 알려주시면 감사하겠습니다 ;-)

@otroboe 실제로 오류 플래그가 지정된 코드를 생략하고 있습니까? 이렇게 생겼나요?

<BottomNav />

그렇다면 문제는 someProp 소품( Props 정의에 따라 필요)을 제공해야 한다는 것입니다.

<BottomNav someProp="foo" />

부끄럽다... 오, 부끄럽다.
나는 TS 통합에 너무 집중해서 주변을 둘러보고 몇 걸음 뒤로 물러나는 것을 잊었습니다.

감사합니다 @pelotom :스마일:

@otroboe 문자열 중복도 제거...

type Styles = 'positionFixed';

그래도 좀 더 쉬웠으면...

네 저도 그랬어요, 감사합니다 :+1:

방금이 동일한 문제에 직면했지만 클래스 또는 함수와 동일한 파일에서 스타일 개체를 초기화한 경우에만 발생하는 것으로 나타났습니다. 또는 다른 파일에서 스타일을 가져오는 경우 이 오류가 발생하지 않습니다.

왜 이런 일이 발생하는지 단서가 있습니까?

@nishmeht7 자체 포함된 스니펫을 게시할 수 있습니까?

@pelotom 방금 하나 만드는 작업을 했으며 내 샌드박스 환경에서 잘 작동합니다. 저는 현재 큰 앱에서 작업 중이며 여전히 mui 버전 1.2.2를 사용하고 있으며 내 샌드박스 환경 버전은 최신 버전입니다. 따라서 버전을 업그레이드하면 오류를 재현할 수 없을 것이라고 추측하고 있습니다.

나는 https://material-ui.com/demos/selects/ 의 기본 양식의 예를 따랐지만 theme root 가 없다는 불만을 받았습니다(최신 타이프스크립트 및 material- ui), form 요소에 클래스가 적용되지 않았습니다. 위의 논의를 따라 보았지만 결정적이지 않은 것 같습니다. 그리고 실제로 상속된 클래스 목록에는 form 대해 생성된 클래스 이름이 누락되었습니다. 생성된 클래스 이름을 수동으로 추가한 경우(개발 도구에서 console.log(theme) 를 사용하여 withStyles에서 찾을 수 있습니다. 모든 것이 정상이므로 분명히 클래스가 올바르게 생성되고 있었습니다. withStyles 를 통해 전달되지 않았습니다. form 요소입니다. 꽤 혼란스럽습니다.

그래서 저는 이것이 정렬될 때까지 지금은 스타일로 되돌아갔습니다.

<form style = {{display:'flex',flexWrap:'wrap'}} autoComplete="off">

@HenrikBechmann typescript에 대한 스타일 문서를 따라해 보셨습니까? 과거에는 저에게 꽤 도움이 되었습니다. https://material-ui.com/guides/typescript/

@lookfirst 감사합니다! 나는 그 문서를보고 (처음은 아니지만 :-)) 사용했습니다.

export default withStyles({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
})(BaseForm)

(함수가 아닌 객체 전달)

... 타이프스크립트 오류를 ​​피하고 생성된 클래스의 삽입을 활성화했습니다.

다른 팁이 더 복잡한 구성에 도움이 되기를 바랍니다.

또한 styles 함수의 더 복잡한 구조가 작동함을 확인했습니다(생성된 className 을 form 주입).

import React from 'react'

import { withStyles, createStyles, Theme } from '@material-ui/core/styles'

/*
    patterned after first demo https://material-ui.com/demos/selects/ for 3.03
    use Typsecript fixes from here: https://material-ui.com/guides/typescript/
*/

const styles = (theme:Theme) => createStyles({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
})

class BaseForm extends React.Component<any,any> {

    render() {
        const { classes } = this.props

        return (
            <form className = {classes.root} autoComplete="off">
                {this.props.children}
            </form>
        )
    }
}

export default withStyles(styles)(BaseForm)

편집: @eps1lon 은 WithStyles 사용 시 이것이 불필요하다고 지적했습니다!

내가 사용하는 일부 성공 했어 ReturnType<T> 생성하기 ClassKey 나를 위해를 :

import * as React from 'react';

import withStyles, {
  StyledComponentProps, 
  StyleRulesCallback,
} from '@material-ui/core/styles/withStyles';

import { Theme } from '@material-ui/core/styles/createMuiTheme';

const overrideStyles = (theme: Theme) => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
  },
});

type Props = StyledComponentProps<keyof ReturnType<typeof overrideStyles>>;

class MyComponent extends React.PureComponent<Props> {
  render() {
    return <div className={this.props.classes.root}></div>;
  }
}

export default withStyles(overrideStyles as StyleRulesCallback, {withTheme: true})(MyComponent);

keyof ReturnType<typeof styleOverrides> 를 StyledComponentProps ClassKey 하면 overrideStyles 반환된 개체에서 키를 가져오고 해당 키 목록을 수동으로 유지하지 않아도 됩니다. . 내가 알아차린 유일한 결함은 withStyles 호출에서 overrideStyles as StyleRulesCallback 를 캐스팅하지 않으면 유형 오류입니다. 이유를 100% 확신할 수 없습니다. 어떤 이유에서인지 overrideStyles 가 무엇인지 이해하지 못하는 withStyles 것 같습니다.

다소 복잡한 유형을 명확히 하기 위해 typeof styleOverrides 는 스타일 개체를 반환하는 함수로 해석됩니다. ReturnType<T> 는 스타일 개체 자체를 가져옵니다. keyof 는 스타일 개체에서 키를 가져옵니다.

@chrislambe typescript 가이드를 확인해야 합니다. ReturnType 등을 사용할 필요는 없습니다. createStyles 및 WithStyles 는 도우미로 충분해야 합니다.

@eps1lon 오, 정말

fwiw 나는 createStyles/withStyles 쌍을 사용함에 따라 점점 더 좋아합니다. 깔끔한 코드를 홍보하고 모든 스타일링/타입스크립트 문제를 처리하며 로컬 조건부 CSS를 원하면 클래스보다 우선하는 로컬 스타일 속성을 생성합니다.

멋진!!

@material-ui/ core @ Test does not have required attribute classes 를 얻습니다.

import React from 'react'
import { Theme, WithStyles, withStyles, createStyles } from '@material-ui/core/styles'

const styles = (theme: Theme) => createStyles({
  root: {
    color: theme.palette.action.active
  },
})

interface Props extends WithStyles<typeof styles> {
  asd: boolean
}

class TestComponent extends React.Component<Props> {

  render() {
    const { classes } = this.props

    return (
      <div className={classes.root}>
      </div>
    )
  }
}

const Test = withStyles(styles)(TestComponent)

const a = () => <Test asd={true}/>

@aaronlifton2
WithStyles를 사용하여 소품 강화를 따르십시오.

@valoricDe 유스 문제는 해결하셨나요?

@TrejGun 방금 확인했습니다. 기능 구성 요소와 @material-ui/ core @

난 정말 이해가 안 돼요.
다음 문서: https://material-ui.com/guides/typescript/#augmenting -your-props-using-withstyles
이 원래 문제의 문제를 일으키는 것 같습니다. 어디에서 구성 요소를 사용할 때 typescript는 클래스 속성이 withStyles에 의해 _주입_될 것이라는 것을 깨닫지 않고 소품으로 _전달_하도록 요구합니다.

나는 지금 몇 시간 동안 이러한 문제를 읽었지만 정말 이해가 되지 않습니다. 이 시점에서 어떤 도움이라도 너무 좋을 것입니다.

위의 제안에 대해

@cfilipov 당신이 사용하는 구성 요소 클래스를한다 장식 할 때 StyledComponentProps 대신 WithStyles , 그리고 엄격한 타입 검사 모드에서 당신은 null이 아닌 주장 연산자를 사용해야 할 경우 ! 추출물에을 classes 의 필드 이것은 withStyles 를 클래스 데코레이터로 사용할 수 있도록 하는 절충안입니다. TypeScript의 클래스 데코레이터는 반환 유형이 인수 유형과 일치해야 한다는 제한 이 있습니다. 이 제한 사항이 있는 경우 한 가지 옵션만 가능합니다.

1. withStyles 를 클래스 데코레이터로 사용하는 것을 지원하지 않습니다.
2. 장식된 구성 요소 유형의 요소를 구성할 때 더미 classes 소품을 전달하도록 요구합니다(이전 절충안은 틀림없이 더 짜증났음 )
3. classes 가 구성 요소 내에서 nullable로 간주되도록 요구하여 해당 필드에 액세스할 때 ! 연산자를 사용해야 합니다( 현재 타협 ).

구성 요소에 상태가 없는 경우 상태 비저장 기능 구성 요소를 사용하는 것이 좋습니다. 그러면 유형 주석이 더 적게 필요하고 유형이 더 안전합니다.

export default withStyles(styles)<Props>(({ classes, message }) => (
  <div className={classes.main}>
    <div className={classes.foo}>
      Hello World! {message}
    </div>
  </div>
));

StyledComponentProps 사용 방법을 어떻게 알 수 있습니까? 스타일 개체에 정의된 키의 문자열을 전달하는 것 같습니다.

그러나 문서는 단순히 작동하지 않는 일을 하라고 우리에게 말합니까? 내가 무엇을 놓치고 있습니까? https://material-ui.com/guides/typescript/#augmenting -your-props-using-withstyles...를 사용하고 싶습니다.

이게 가능해?

@valoricDe , 해당 문제가 없는 기능 구성 요소를 어떻게 수행했습니까?

@TrejGun 방금 확인했습니다. 기능 구성 요소와 @material-ui/ core @

나는 다음과 같은 것을 시도하고 있습니다.

```import React, { ChangeEvent, Component, Dispatch } from "react";
"prop-types"에서 PropType을 가져옵니다.
"react-redux"에서 { 연결 } 가져오기;
"@material-ui/core"에서 { 그리드, FormControlLabel, 테마, createStyles, withStyles, Radio, WithStyles } 가져오기;
"./Amount"에서 금액 가져오기;
"../../store/actions/selectPaymentAmountActions"에서 { onPastDueFormFieldChange } 가져오기;

const 스타일 = (테마: 테마) =>
createStyles({
양: {
alignSelf: "중앙",
},
});

인터페이스 OwnProps는 WithStyles를 확장합니다.{}

인터페이스 StateProps {
기한이 지났습니까?: 번호;
pastDueOrTotalOrOther: 문자열;
}

인터페이스 DispatchProps {
onPastDueFormFieldChange: OnPastDueFormFieldChange;
}

유형 소품 = StateProps & DispatchProps & OwnProps;

const PastDueFormField = withStyles(스타일)(
({ 클래스, pastDue, pastDueOrTotalOrOther, onPastDueFormFieldChange }: 소품) => (
값 = "지난"
checked={과거 마감일 또는 전체 또는 기타 === "과거 마감일"}
onChange={onPastDueFormFieldChange}
label="기한 경과:"
컨트롤={ }
/>




),
);

const mapStateToProps = (상태: RootState): StateProps => ({
과거 기한: state.customerData.balanceDue.pastDue,
pastDueOrTotalOrOther: state.customerPaymentsForm.pastDueTotalOrOther,
});

기본 연결 내보내기(
mapStateToProps,
{ onPastDueFormFieldChange },
)(과거 마감 양식 필드);

When I use this component I have this error:
```import PastDueFormField
Property 'classes' is missing in type '{}' but required in type 'Readonly<PropsWithChildren<Pick<Pick<Props, "pastDue" | "pastDueOrTotalOrOther" | "onPastDueFormFieldChange"> & StyledComponentProps<"amount">, "classes" | "innerRef"> & OwnProps>>'

@yehudamakarov 먼저 react-redux 없이 코드를 작성하고 모든 것이 예상대로 작동하면 connect 추가하십시오. prop이 주입될 때 좋은 개요를 얻는 것은 믿을 수 없을 정도로 어렵습니다.

이러한 문제가 발생하면

1. 내 구성 요소 소품을 먼저 입력
2. 모든 것이 예상대로 필요한지 확인하십시오. 즉 missing props
3. 임시 적용
4. typescript가 주입된 모든 소품을 인식하는지 확인
5. 모든 혹이 적용될 때까지 3을 반복합니다.

더 깨끗한 코드를 촉진합니다. 특히 작업 순서와 관련하여. 현재 withStyles 와 connect 를 구분하지 않고 혼합하고 있습니다.

세바스찬 정말 감사합니다.
연결에 일반 인수를 전달하지 않음으로써 문제를 해결했습니다. <StateProps ...> 덩어리를 꺼냈습니다.

나는 그 일반 인수가 WithStyles<>를 확장하는 내 OwnProps 인터페이스를 엉망으로 만들고 있다고 생각합니다.

어쨌든 구성 요소에 모든 것을 전달하기 때문에 내 Props에서 얻은 유형 검사로 충분합니다. id에 connect<> 제네릭이 필요한 이유를 잘 모르겠습니다.

감사 해요!

타이핑을 올바르게 했다면 클래스를 "장식"하는 모습은 다음과 같습니다.

type NonStyleProps = {
  text: string
};

const styles = {
  root: {
    backgroundColor: 'red'
  }
};

const DecoratedComponent = withStyles(styles)(
  class extends React.Component<NonStyleProps & WithStyles<'root'>> {
    render() {
      return (
        <div className={this.props.classes.root}>
          {this.props.text}
        </div>
      );
    }
  }
);

그리고 내부에 테마(useTheme())를 추가하는 방법은 다음과 같습니다.

const decorate = withStyles((theme: Theme) => ({
  root: {
    display: "flex"
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(["width", "margin"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    })
  }
})