How can I properly customize and expand upon a Material UI ListItem component?

Question

How can I properly customize and expand upon a Material UI ListItem component?

I'm currently working with TypeScript version 3.4.5 and Material UI version 4.2. I have the following code snippet:

interface MyItemProps {
    name: string;
    value: string;
}

function Item({ name, value, ...props }: ListItemProps<'li', MyItemProps>): ReactElement {
    return (
        <ListItem {...props} className="item">
            <ListItemText primary={name} secondary={value || '-'} />
        </ListItem>
    );
}

I encountered an error stating

Type 'boolean' is not assignable to type 'true'

. Can anyone clarify why this error occurs?

I've reviewed the type definitions for ListItem, but I'm still unsure about what's causing the issue:

export interface ListItemTypeMap<P, D extends React.ElementType> {
  props: P & {
    alignItems?: 'flex-start' | 'center';
    autoFocus?: boolean;
    button?: boolean;
    ContainerComponent?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
    ContainerProps?: React.HTMLAttributes<HTMLDivElement>;
    dense?: boolean;
    disabled?: boolean;
    disableGutters?: boolean;
    divider?: boolean;
    focusVisibleClassName?: string;
    selected?: boolean;
  };
  defaultComponent: D;
  classKey: ListItemClassKey;
}

declare const ListItem: OverridableComponent<ListItemTypeMap<{ button?: false }, 'li'>> &
  ExtendButtonBase<ListItemTypeMap<{ button: true }, 'div'>>;

export type ListItemClassKey =
  | 'root'
  | 'container'
  | 'focusVisible'
  | 'default'
  | 'dense'
  | 'disabled'
  | 'divider'
  | 'gutters'
  | 'button'
  | 'secondaryAction'
  | 'selected';

export type ListItemProps<D extends React.ElementType = 'li', P = {}> = OverrideProps<
  ListItemTypeMap<P, D>,
  D
>;

export default ListItem;

The concept of "type widening" comes to mind, but I need further clarification on why this might be happening.

Could someone provide an explanation regarding this issue? Additionally, what is the correct approach to extending a Material UI component?

javascript reactjs typescript material-ui

Answer 1

Answer №1

There seems to be a known issue documented on the material-ui github regarding using booleans for union discrimination in TypeScript. As someone new to TS, the concept is still a bit unclear to me!

To work around this issue without resorting to explicitly typing button as any in the component props, I discovered a cleaner solution from reading through those discussions. By directly casting button as true onto the ListItem, you can avoid potential errors:

interface MyItemProps {
    name: string;
    value: string;
}

type MyListItem = ListItemProps<"li", MyItemProps>;

function Item({ name, value, button, ...props }: MyListItem): ReactElement {
    return (
        <ListItem {...props} className="item" button={button as true}>
            <ListItemText primary={name} secondary={value || '-'} />
        </ListItem>
    );
}

Answer 2

There seems to be a known issue documented on the material-ui github regarding using booleans for union discrimination in TypeScript. As someone new to TS, the concept is still a bit unclear to me!

To work around this issue without resorting to explicitly typing button as any in the component props, I discovered a cleaner solution from reading through those discussions. By directly casting button as true onto the ListItem, you can avoid potential errors:

interface MyItemProps {
    name: string;
    value: string;
}

type MyListItem = ListItemProps<"li", MyItemProps>;

function Item({ name, value, button, ...props }: MyListItem): ReactElement {
    return (
        <ListItem {...props} className="item" button={button as true}>
            <ListItemText primary={name} secondary={value || '-'} />
        </ListItem>
    );
}

Answer 3

Answer №2

The core concept here revolves around the functionality of intersection types.

To simplify, you are presented with two options:

If the element is of type "li", then the button property must be either false or undefined.
If the element is of type "div", then the button property needs to be true.

In my scenario, I utilized "li" as a type parameter within the generic type ListItemProps. Consequently, passing down the button prop directly is not feasible. It should be omitted (or set as false) instead:

interface MyItemProps {
    name: string;
    value: string;
}

function Item({ name, value, button /* omit or set to false */, ...props }: ListItemProps<'li', MyItemProps>): ReactElement {
    return (
        <ListItem {...props} className="item">
            <ListItemText primary={name} secondary={value || '-'} />
        </ListItem>
    );
}

Answer 4

The core concept here revolves around the functionality of intersection types.

To simplify, you are presented with two options:

If the element is of type "li", then the button property must be either false or undefined.
If the element is of type "div", then the button property needs to be true.

In my scenario, I utilized "li" as a type parameter within the generic type ListItemProps. Consequently, passing down the button prop directly is not feasible. It should be omitted (or set as false) instead:

interface MyItemProps {
    name: string;
    value: string;
}

function Item({ name, value, button /* omit or set to false */, ...props }: ListItemProps<'li', MyItemProps>): ReactElement {
    return (
        <ListItem {...props} className="item">
            <ListItemText primary={name} secondary={value || '-'} />
        </ListItem>
    );
}

How can I properly customize and expand upon a Material UI ListItem component?

Answer №1

Answer №2

Similar questions

I recently designed a form using a combination of HTML and JavaScript in order to display different dialogues depending on the number of selections made. Unfortunately, the alert function does not seem to be functioning

Remove the bottom border from the active tab by utilizing the <div> and <a> elements

Tips on how to customize Material UI box component for overlay styling

trigger an event once an element has completed cycling using cycle.js

What is the process for updating JSON using TextFields?

I am unsure about how to properly implement the reduce function

What is the best way to store data retrieved using a model.find({}) operation?

EBUSY: Unable to access resource due to being busy or locked, unable to retrieve information from 'C:hiberfil.sys'

Encountered an Angular 2 error: NullInjectorError - Http provider not found

The MUI date picker does not display dates earlier than 1900

Error: Prettier is expecting a semi-colon in .css files, but encountering an unexpected token

Encountering an issue with d3 Angular 2 pie chart related to d3.arc data

Getting the first validation message from Input in React: What you need to know

Uploading files with the help of Formik and the Material-UI stepper component

Place the outcome of the function into the div element's attribute

From vanilla JavaScript to the powerful lodash library

Load styles in Nuxt asynchronously to improve performance

Encountering an Internal Server Error while running NextJs 13 in production environment, integrated with sanity and net

Customizing the underlineFocusStyle of a material-ui TextField component using regular CSS styling

"Combining server-side rendering with client-side rendering for optimal SEO