The defaultTreeItemRenderer does not pass the className and liClassName props to the TreeItem

[mlaursen]

Description

The defaultTreeItemRenderer in the @react-md/tree package does not currently provide the className and liClassName props on each item to the TreeItem which means custom styling does not work out of the box. This is really an issue since this is used in the @react-md/layout package and the navigation items cannot be styled right now.

Workaround

This can be worked around by implementing a custom getItemProps function on the Tree ( or treeProps for the Layout component`

import { GetItemProps } from '@react-md/tree';

export const getItemProps: GetItemProps = ({ className, liClassName }) => ({
  className,
  liClassName,
});

import { Layout, useLayoutNavigation } from '@react-md/layout';
import { useLocation, Link } from 'react-router-dom';

import { getItemProps } from './getItemProps';
import { navItems } from './navItems';

const App = () => {
  const { pathname } = useLocation();

  return (
    <Layout
      treeProps={{
        ...useLayoutNavigation(navItems, pathname, Link),
        getItemProps,
      }}
    >
      {/* children */}
    </Layout>
  );
}

Codesandbox example: https://codesandbox.io/s/react-md-creating-a-layout-forked-y0i14?file=/src/Layout.tsx