es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El estilo anidado de los elementos de “MUI TreeItem” no funciona como se espera.

06 Jun, 2023 Programación

Estoy tratando de implementar una estructura de datos de árbol usando TreeView.
Recientemente hice esta pregunta sobre cómo dar estilo a un TreeItem.

En mi caso, cada nodo del árbol tiene su propia propiedad que indica si debe mostrarse en verde o rojo.

interface OrganisationTreeItemProps extends TreeItemProps {
  shouldBeGreen: boolean;
}

const OrganisationTreeItem = styled(TreeItem, {
  shouldForwardProp: (prop: PropertyKey) => prop !== "shouldBeGreen"
})<OrganisationTreeItemProps>(({ theme, shouldBeGreen }) => ({
  [`& .${treeItemClasses.label}`]: {
    .....
    color: shouldBeGreen ? "green" : "red", // el problema está aquí
    .....
  }
}));

Aquí hay un CodeSandbox, que describe mejor el problema.

Edit new

¿Cómo podría resolver esta tarea?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para resolver esta tarea, debes pasar la propiedad shouldBeGreen al componente TreeItem y luego acceder a ella en el estilo de la etiqueta utilizando el tipo TreeItemLabelProps. Puedes hacer esto creando un componente de etiqueta personalizado TreeItemLabel que tome la propiedad shouldBeGreen y la pase al objeto TreeItemLabelProps. Aquí tienes un ejemplo de implementación:

    interface OrganisationTreeItemProps extends TreeItemProps {
  shouldBeGreen: boolean;
}

interface TreeItemLabelProps extends TreeItemLabelPropsOptions {
  shouldBeGreen: boolean;
}

const OrganisationTreeItemLabel = styled(TreeItemLabel)<treeitemlabelprops>(({ theme, shouldBeGreen }) => ({
  ...theme.typography.body1,
  backgroundColor: theme.palette.background.paper,
  padding: theme.spacing(1),
  color: shouldBeGreen ? "green" : "red",
}));

const OrganisationTreeItem = (props: OrganisationTreeItemProps) => {
  const { shouldBeGreen, ...otherProps } = props;
  return (
    <treeitem {...otherprops}="" label="{("></treeitem><organisationtreeitemlabel shouldbegreen="{shouldBeGreen}">
        {props.label}
      </organisationtreeitemlabel>
    )}>
      {props.children}

  );
};

    En este código, creamos un componente personalizado OrganisationTreeItemLabel que extiende el componente TreeItemLabel de TreeView. Pasamos la propiedad shouldBeGreen y la usamos para establecer condicionalmente el color del texto de la etiqueta.

    En el componente OrganisationTreeItem, extraemos la propiedad shouldBeGreen y pasamos las props restantes al componente TreeItem. También pasamos la propiedad shouldBeGreen al componente OrganisationTreeItemLabel como una prop para asegurarnos de que se aplique correctamente el estilo de la etiqueta.

    Para usar este componente personalizado en tu código, simplemente reemplaza el componente TreeItem con OrganisationTreeItem y pasa la propiedad shouldBeGreen:

    typescript
    <organisationtreeitem nodeid="1" label="Título 1" shouldbegreen="{true}">
    <organisationtreeitem nodeid="2" label="Hijo 1" shouldbegreen="{false}"></organisationtreeitem>
    <organisationtreeitem nodeid="3" label="Hijo 2" shouldbegreen="{true}"></organisationtreeitem>
    </organisationtreeitem>

Comments are closed.