1

Tengo un componente ChipsArray que usa MaterialUI Chip. Todos los chips dentro de ChipsArray usan un color gris, pero hay una sección específica de la aplicación donde los chips deben usar un color diferente. No estoy seguro de cómo resolver esto. ¿Debo pasar una propiedad de color del Chip al Chip Array? Intenté diferentes formas de lograr esto, pero aún no tuve éxito. ¡Cualquier ayuda sería genial!

Aquí está mi componente ChipsArray:

import React, { useState, useEffect } from "react";
import { useIntl } from "react-intl";
import classNames from "classnames";

import Chip from "@mui/material/Chip";

import { Theme } from "@mui/material/styles";
import makeStyles from "@mui/styles/makeStyles";

type ChipsArrayProps<T = any> = {
    chipData: T[];
    erasable?: boolean;
    singleSelection?: boolean;
    multiSelection?: boolean;
    onListChange?: (value: any) => void;
    onClickElement?: (value: any) => void;
    onDeleteElement?: (value: any) => void;
    autocompleteTagsFor?: "sectors" | "products" | "tags" | "peers";
    disabled?: boolean;
    chipRef?: React.RefObject<HTMLDivElement>;
    // color?: "primary" | "secondary" | string;
};

const ChipsArray = (props: ChipsArrayProps) => {
    const classes = useStyles();
    const {
        chipData,
        singleSelection,
        multiSelection,
        erasable,
        onListChange,
        onClickElement,
        onDeleteElement,
        disabled,
        chipRef,
    } = props;
    const intl = useIntl();
    const [data, setData] = useState(chipData || []);

    const Chips = ({ shouldReverse, sliceLimit }: { shouldReverse: boolean; sliceLimit: number }) => {
        const limit = sliceLimit || data.length;

        const chipsList = data.slice(0, limit).map((element: any) => {
            return (
                <Chip
                    key={element.key}
                    variant="outlined"
                    disabled={disabled}
                    ref={chipRef && chipRef}
                    label={element.value || (element.label && intl.formatMessage({ id: element.label }))}
                    className={classNames(classes.chip, {
                        [classes.selectedChip]: element.selected,
                        [classes.unselectedChip]: !element.selected,
                        selectedChip: element.selected,
                        unselectedChip: !element.selected,
                    })}
                />
            );
        });

        return <>{shouldReverse ? chipsList.reverse() : chipsList}</>;
    };

    return (
        <Chips
            shouldReverse={props.autocompleteTagsFor === "sectors" || props.autocompleteTagsFor === "products"}
            sliceLimit={props.autocompleteTagsFor === "tags" ? 5 : 0}
        />
    );
};

export default ChipsArray;

1 respuesta 1

1

siguiendo la documentación oficial esta bastante claro. He modificado un ejemplo para que veas como recomiendan hacer esto.

Declarar tu chipsArray así:

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Chip from '@mui/material/Chip';
import Paper from '@mui/material/Paper';
import TagFacesIcon from '@mui/icons-material/TagFaces';

interface ChipData {
  key: number;
  label: string;
  color?: "primary" | "secondary" | "warning";
}

const ListItem = styled('li')(({ theme }) => ({
  margin: theme.spacing(0.5),
}));

export default function ChipsArray() {
  const [chipData, setChipData] = React.useState<readonly ChipData[]>([
    { key: 0, label: 'Angular', color:'primary' },    
    { key: 1, label: 'jQuery', color: 'secondary' },
    { key: 2, label: 'Polymer', color: 'warning' },
    { key: 3, label: 'React', color: 'primary' },
    { key: 4, label: 'Vue.js', color: 'primary' },
  ]);

  const handleDelete = (chipToDelete: ChipData) => () => {
    setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key));
  };

  return (
    <Paper
      sx={{
        display: 'flex',
        justifyContent: 'center',
        flexWrap: 'wrap',
        listStyle: 'none',
        p: 0.5,
        m: 0,
      }}
      component="ul"
    >
      {chipData.map((data) => {
        let icon;

        if (data.label === 'React') {
          icon = <TagFacesIcon />;
        }

        return (
          <ListItem key={data.key}>
            <Chip
              color={data.color}
              icon={icon}
              label={data.label}
              onDelete={data.label === 'React' ? undefined : handleDelete(data)}
            />
          </ListItem>
        );
      })}
    </Paper>
  );
}

Como ves, si declaras tu array de chips así:

const [chipData, setChipData] = React.useState<readonly ChipData[]>([
    { key: 0, label: 'Angular', color:'primary' },    
    { key: 1, label: 'jQuery', color: 'secondary' },
    { key: 2, label: 'Polymer', color: 'warning' },
    { key: 3, label: 'React', color: 'primary' },
    { key: 4, label: 'Vue.js', color: 'primary' },
  ]);

He puesto varios colores en varios chips. Yo los he puesto manual.. como si los quieres poner dinámicos (los colores ) basandote en la key o en lo que necesites.

Claro, necesitas declarar el tipo de data previamente (como dice la documentación):

interface ChipData {
  key: number;
  label: string;
  color?: "primary" | "secondary" | "warning";
}

Una vez así solo hace falta llamar a este color al a hora de pintar el elemento Chip.

{chipData.map((data) => {
// ....
 <Chip
    color={data.color}
    label={data.label}
 />
// ....
}

A partir de aquí, modificalo a tu gusto Copia y pega todo el codigo que te he pasado y veras como funciona perfectamente.

Un saludo.

1
  • Ahh ok!! Perfecto... me estaba complicando más de la cuenta. Marco tu solución como respuesta a la pregunta.
    – CatroVal
    Commented el 3 abr. 2023 a las 16:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.