How can I change the color of a selection area?

[ManucherKM]

Using the react-selecto package in my web application I ran into a problem. My web application has its own dominant colors. I use them to show user activity in the interface, on hover, focus, and so on. But the default blue color in the package is not suitable for the style of my web application, otherwise everything suits me. How can I solve this problem?

[jadiagaurang]

Hi @ManucherKM

You can use className prop to setup a CSS Class to customize selection area color!

[ManucherKM]

@jadiagaurang Could you please provide an example of working code. My code doesn't work (I apologize for the formatting.): `<Selecto className="bg-red-400 border-red-400 text-red-400" container={blockForSelection.current} selectableTargets={[".file"]} selectByClick selectFromInside continueSelect={false} toggleContinueSelect={"shift"} hitRate={100} onSelect={e => { const activeClass = "_active_kq2ra_39"

    e.added.forEach(el => el.classList.add(activeClass))
    e.removed.forEach(el => el.classList.remove(activeClass))
}}

/>`

[jadiagaurang]

Hi @ManucherKM

I am very sorry for the delayed response.

You need to create a CSS class in the dom!

Example:

.mpr-designer-selection {
  background: rgba(255, 0, 0, 0.5) !important; /* Red Color with half opacity */
}

And use the same class name in the Selecto Config.

window.SelectoRef = new Selecto({
    className: "mpr-designer-selection",
    container: designCanvas,
    dragContainer: designCanvas,
    selectableTargets: [".el"],
    hitRate: 0,
    selectByClick: true,
    preventClickEventOnDrag: true,
    selectFromInside: false,
    toggleContinueSelect: ["shift"],
    ratio: 0
});

Take a look at the Codepen Example at https://codepen.io/jadiagaurang/pen/QWJyEaE

CC @daybrush Please make corrections if needed!