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;