How set selected font color? about react-treebeard

[covelloz]

@eladhayun @LiguidCool @sarahmarciano

You can change the background color using
tree > node > activeLink

However, simply adding color: "blue" to activeLink section doesn't do the trick.
This is because the text is actually tree > node > header > base which has an inline-style hardcoded in there.

I did figure out a way to do it using a custom decorator:

import { Treebeard, decorators } from 'react-treebeard';

class ListTree extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cursor: '',
      prevNode: ''
    };
    this.onToggle = this.onToggle.bind(this);
  }

  onToggle(node, toggled) {
    // Store previous node & de-activate
    if (this.state.prevNode !== '') {
      let stateUpdate = Object.assign({}, this.state);
      stateUpdate.prevNode.active = false;
      this.setState(stateUpdate);
    }
    this.setState({prevNode: node});

    // Activate new node
    node.active = true;
    if(node.children) {
      node.toggled = toggled;
    }
    this.setState({cursor: node});
  }

  render() {
    const mydecorator =  {
      Header: (props) => {
        const activeColor = this.state.cursor.id === props.node.id ? '#428BCA' : '#9DA5AB';
        return (
          <div style={props.style.base}>
            <div id={props.node.id} style={{'color':activeColor}}>
              {props.node.name}
            </div>
          </div>
        );
      }
    }
  return (
            <Treebeard
              data={data}
              onToggle={this.onToggle}
              decorators={{...decorators, Header: mydecorator.Header}}
            />
  )
  }
export default ListTree;

[eladhayun]

tree > node > header > base
add color: '#FFFFFF' for example...

[sarahmarciano]

@eladhayun this change the color of the whole tree I would want to change just the color of the selected node
do you know how can I do that?
thank you.

[elenilson-costa]

How to set the arrow color in treebeard ?