React-grid-layout: How can I override the resizable handle icon?

[damiangreen]

I'm working with a dark background and the image is black so its barely visible

[rskarras]

Are you referring to changes to the styling? If so it's a simple adjustment in the .css file as shown below.
If this is not what you're looking for could you clarify what you mean by overriding the icon?

.react-grid-item > .react-resizable-handle::after {
   content: "";
   position: absolute;
   right: 3px;
   bottom: 3px;
   width: 5px;
   height: 5px;
   border-right: 2px solid rgba(0, 0, 0, 0.4);
   border-bottom: 2px solid rgba(0, 0, 0, 0.4);  // Update rgba values for color and transparency.
}

You should be able to make any adjustments you need here. For color, change the rgba value of the border styling.

[damiangreen]

thanks @rskarras that did it . I made it white

border-right: 2px solid rgba(255, 255, 255, 0.5);
border-bottom: 2px solid rgba(255, 255, 255, 0.5);

[jonpepler]

@damiangreen Bit late to the party but I like to use mix-blend-mode: difference to change the colour of the handle to fit any background.

[rafaellichen]

My way of using custom resize icon is actually "hiding" the actual default resize handler itself.

/* Hide React-Grid-Layout ResizeHandle for now */
.react-resizable-handle.react-resizable-handle-se {
    opacity: 0;
}

Then, you just position an element with position: absolute; right: 0; bottom: 0; to the bottom right corner.