react-moveable and css modules - cant apply css styling - css

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

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;
}