react-moveable and css modules - cant apply css styling

Question

I'm using react-moveable to have drag and drop support for some component. I'm trying to make the control box disappear until the user clicks on the target.

So first, I want to apply some CSS to the control box, but I can't seem to do it. The docs specify that a className could be set, but it doesn't work for me for some reason.

The component looks something like this:

import React from "react";
import Moveable from "react-moveable";

import { makeMoveable, DraggableProps, ResizableProps, RotatableProps, Rotatable, Draggable, Resizable } from "react-moveable";
import MoveableHelper from "moveable-helper";
import styles from './label.module.css';

const Label = () => {
  const [helper] = React.useState(() => {
    return new MoveableHelper();
})
const targetRef = React.useRef<HTMLDivElement>(null);
  return (
    <div className="container">
     <div>
        name
      </div>
      <Moveable
        className={styles.moveable1}
        target={targetRef}
        draggable={true}
        resizable={true}
        rotatable={true}
        origin={false}
        onDragStart={helper.onDragStart}
        onDrag={helper.onDrag}
        onResizeStart={helper.onResizeStart}
        onResize={helper.onResize}
        onRotateStart={helper.onRotateStart}
        onRotate={helper.onRotate}
      />
    </div>
  );
};

export default Label;

And the css module file label.module.css:

.moveable1 .moveable-line .moveable-direction  {
    background: red !important;

}

I tried to set the className as string, play around with the class names in the css files and more, but nothing changes the control box style.

Any ideas?

Answer 1

1. The control box is defined by the zoom and the renderDirection

We can make it disappear (zoom default is 1 )

zoom={0}

and modify / hide the border controls. (Default)

 renderDirections={["nw", "n", "ne", "w", "e", "sw", "s", "se"]} )

And then you can apply some styles to the target div with a normal onClick function and useState hook.

import React from "react";
import Moveable from "react-moveable";

import { makeMoveable, DraggableProps, ResizableProps, RotatableProps, Rotatable, Draggable, Resizable } from "react-moveable";
import MoveableHelper from "moveable-helper";
import styles from './label.module.css';

const Label = () => {
  const [helper] = React.useState(() => {
    return new MoveableHelper();
})
const targetRef = React.useRef<HTMLDivElement>(null);

const [styles, setStyles] = useState( {border: "1px solid green";} ) 

const handleStyles = e => { 
// Your styles... 
// Your setState Hook
setStyles({border: "1px solid blue"})

}
  return (
    <div className="container">
     <div onclick={handleStyles} style={styles}>
        name
      </div>
      <Moveable
        className={styles.moveable1}
        target={targetRef}
        draggable={true}
        resizable={true}
        rotatable={true}
        origin={false}
        onDragStart={helper.onDragStart}
        onDrag={helper.onDrag}
        onResizeStart={helper.onResizeStart}
        onResize={helper.onResize}
        onRotateStart={helper.onRotateStart}
        onRotate={helper.onRotate}


        { /** Hide the control box * /  }
        zoom={0}
        renderDirections{["nw", "n", "ne"]}
      />
    </div>
  );
};

export default Label;

Docs:

Zoom Types: https://daybrush.com/moveable/release/latest/doc/Moveable.html#zoom

Render Directions: https://daybrush.com/moveable/release/latest/doc/Moveable.html#.RenderDirections

CSS style Box: https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-directions

style={{ background: 'yellow' }}

Hope you find this useful. Regards, M.

Answer 2

Just to be sure, did you try .moveable-control css class name as in:

.moveable-control {
    background: red !important;
}