abbasyadollahi
commented
4 years ago Seems to be an issue with more than just the Collapse component, I'm having the same problem with CardHeader. I think the problem is the type definitions are restricted to the default component used instead of being overridable like the Chip or Avatar components.
Here's a sandbox with my code showing the similar issue.
As you can see, it works for Chip but doesn't work for CardHeader.
https://codesandbox.io/s/quirky-yalow-9m3iq
If I were to update the type definitions for CardHeader to resemble the ones using an overridable defaultComponent, than it would work. Here's the code for that (the same thing can be done with Collapse).
import * as React from 'react';
import { TypographyProps } from '../Typography';
import { OverridableComponent, OverrideProps } from '../OverridableComponent';
export interface CardHeaderTypeMap<P = {}, D extends React.ElementType = 'div'> {
props: P & {
action?: React.ReactNode;
avatar?: React.ReactNode;
disableTypography?: boolean;
subheader?: React.ReactNode;
subheaderTypographyProps?: Partial<TypographyProps>;
title?: React.ReactNode;
titleTypographyProps?: Partial<TypographyProps>;
}
defaultComponent: D;
classKey: CardHeaderClassKey;
}
declare const CardHeader: OverridableComponent<CardHeaderTypeMap>;
export type CardHeaderClassKey =
| 'root'
| 'avatar'
| 'action'
| 'content'
| 'title'
| 'subheader';
export type CardHeaderProps<
D extends React.ElementType = CardHeaderTypeMap['defaultComponent'],
P = {}
> = OverrideProps<CardHeaderTypeMap<P, D>, D>;
export default CardHeader;
oliviertassinari
larsivi
eps1lon
I am using the Collapse component in a TypeScript project. I am trying to set a custom trigger component for the Collapse component, using the component prop. This works if the component is a dumb one, but not if it requires props. I want a collapse trigger that is dynamically generated such that it can show a summary of the collapsed contents.
Current Behavior 😯
I get the following error
Expected Behavior 🤔
I would expect that my component works as if it was JS instead of TypeScript, or some documentation for the Collapse component stating how I should typify my component. I only found a general reference to create an issue here if I were to find such a rejection though, so here I am. Also seems to be similar to issue #17699 that was fixed.
Steps to Reproduce 🕹
Here is a codesandbox showing the issue. https://codesandbox.io/s/heuristic-lalande-plt53
Also a sandbox to show that it is not an issue in JS. https://codesandbox.io/s/material-demo-6j9ef
Steps:
1 The error is directly visible in the sandbox.
Context 🔦
I am trying to have a dynamic Collapse trigger.
Your Environment 🌎