react-checkbox-tree icon indicating copy to clipboard operation
react-checkbox-tree copied to clipboard

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

Open vahe-martirosyan-qp opened this issue 2 years ago • 1 comments

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

vahe-martirosyan-qp avatar Jul 18 '22 17:07 vahe-martirosyan-qp

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.

jakezatecky avatar Sep 06 '22 20:09 jakezatecky

Closing due to lack of activity.

jakezatecky avatar Jan 17 '23 19:01 jakezatecky