material ui - colorize background of MUI-X RichTreeView individual rows - Stack Overflow

admin管理员组

文章数量:1391964

A newbie question: I use Mui-X's RichTreeView to display data passed as a JSON structure from a server. I struggle applying per item custom background color to rows: what I need is e.g. a simple input:

[
    {"label":"Root 1", "id":"R1", "children":[],color:"#F00"},
    {"label":"Root 2", "id":"R2",color:"#F00","children":[
        {"label":"Child 1", "id":"R21", "children":[],color:"#0F0" },
        {"label":"Child 1", "id":"R21", "children":[],color:"#0F0" },
    ]}
]

where custom attribute (color in this case) defines background color of each tree row. I use

<RichTreeView items={treeData} /> 

and this does render the tree for me, just without colors.

Any attempt to implement custom item rendering I tried failed so far. Could someone smarter and experienced help me, please?

I tried this approach:

<RichTreeView items={treeData}>
    {treeData.map((node) => renderTree(node))}
</RichTreeView>

and

`const renderTree = (nodes) => {
    return (
        <CustomTreeItem
            key={nodes.id}
            nodeId={nodes.id}
            label={
                <span style={{ backgroundColor: nodes.color }}>
                    {nodes.label}
                </span>
            }
        >
            {Array.isArray(nodes.children) ?
                nodes.children.map((node) => {
                    return renderTree(node);
                })
                : null
            }
        </CustomTreeItem>
    );
};`

this does execute, renderTree() is called, however its output is completely ignored and the resulting html code is missing SPAN tags altogether.

本文标签： material uicolorize background of MUIX RichTreeView individual rowsStack Overflow