sveltecarbon-design-systemcarbon-components-svelte

In carbon-components-svelte TreeView: how to change cursor to pointer on hover of a children?

The examples from https://carbon-components-svelte.onrender.com/components/TreeView can't do that, but the left tree in the document itself can.

Wondering how is that achieved?

Solution

  • The "tree" on the left is the SideNav which is part of the UI shell. It just has that cursor change as part of its default styling.

    If you want to override the style of the tree view, you just have to add some additional CSS.

    /* Within a component :global(...) needs to be used */
.bx--tree-node  {
    cursor: pointer;
}

    REPL example