Is it possible to change the color of the children checkboxes when the parent is Selected?

[JoseSNubimetrics]

Hello, guys! hope you are doing well. like the title says, I'm trying to change the checkboxes's color of the children when the parent is selected. Currently, when a Parent is selected, the checkbox color turn into blue and the children too, as well. I've been struggling with this and I can't find the right way to do it.

Maybe with the onAction prop or only with css, but IDK.

Would appreciate your help! Thanks

[mrchief]

This should be possible using CSS. You may want to explore https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

[Josesan94]

I've tried to use only CSS, but unfortunately couldn't find the answer there. The thing is that both parent and children have the same properties when you Click on a parent's checkbox, so it's difficult to change it from there. Any other idea??

Thanks!

[mrchief]

You have to massage the data a bit but you can assign className to each and every node via className property. So you can pass something like

{
    label: "VP Accounting",
    checked: true,
    className: "parent",
    children: [
      {
        label: "iWay",
        className: "child_lvl_1",
        children: [
          { label: "Universidad de Especialidades del Espíritu Santo", className: "child_lvl_2", },
          { label: "Marmara University" },
          { label: "Baghdad College of Pharmacy" }
        ]
      },

and style them as you like.