jakezatecky / react-checkbox-tree

A simple and elegant checkbox tree for React.

Home Page:https://jakezatecky.github.io/react-checkbox-tree/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

add classnames for "rct-title" if checked or not

VaheMartirosyan opened this issue · comments

commented

Hi there, I want to detect and change the design for halfchecked element titles #367

If you want to change the half-check icon, you can do that by adding the icons property to the tree and supplying a value for halfCheck:

<CheckboxTree
    ...
    icons={{
        halfCheck: <WhateverJSX />,
    }}
/>

However, I assume you want to stylize the title text that is adjacent to a half-checked element? If so, the tree component does not flag the parent label state for easy CSS selection. Nevertheless, you may be able to use the has() pseudo-class to make a complicated selector that allows you to style the titles of nodes with the half-check state:

.rct-checkbox:has(> .rct-icon-half-check) + .rct-node-icon + .rct-title {
  /* Do whatever */
}

The :has selector has limited browser support, though.

Closing due to lack of activity.