controlling checkbox background-color

[mohamed bachali]

hi, I am trying to dynamically change the color of the checkbox depending on a variable

resource.schoolColor

the same way it being done in the multiple resources example.  could someone help me? th is my actual code snippet: 

<CheckBoxComponent

                        id={`resource-checkbox-${resource.id}`}

                        checked={selectedSchools.includes(resource.id)}

                        label={resource.schoolName}

                        cssClass=""

                       

                        change={(args) => onChange(args, resource.id)}

                      />

thanks                                                                                                                                                                                      

[mohamed bachali]

hi, I just managed to have it done by creating a dynamic class: 

 // Inject dynamic styles based on school colors

  useEffect(() => {

    const styleSheet = document.styleSheets[0];

    resourceData.forEach((resource) => {

      const className = `checkbox-${resource.id}`;

      const rule = `

        .property-panel-content .e-checkbox-wrapper.${className} .e-frame {

          background-color: ${resource.schoolColor};

          border-color: transparent;

        }

      `;

      styleSheet.insertRule(rule, styleSheet.cssRules.length);

    });

  }, [resourceData]);

and then 

[Florence Lilian Awino]

Hi Mohamed,

We're glad your issue was resolved. Please get back to us for further assistance in the future.

Regards,

Florence L.