Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

mlaursen opened this issue Aug 17, 2020 · 0 comments


Copy link

mlaursen commented Aug 17, 2020


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.


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 }) => ({
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 (
        ...useLayoutNavigation(navItems, pathname, Link),
      {/* children */}

Codesandbox example:

@mlaursen mlaursen added the bug label Aug 17, 2020
mlaursen added a commit that referenced this issue Aug 19, 2020
The `defaultTreeItemRenderer` will now correctly pass the `className`
and `liClassName` attributes as props to the `TreeItem` by default. This
helps with overriding the default styles of when using the `Layout`'s
navigation tree.

Note: You'll still need to use the `getItemProps` prop if you want to
specify custom styles while the tree item is `active` (`selected` state)

Closes #920
@mlaursen mlaursen added this to the v2.3.0 milestone Aug 19, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

No branches or pull requests

1 participant