Changing Cursor Conditionally

[skspade]

Hey all,

I am aware you can change the cursor via css like so

.react-flow__pane {
  cursor: progress !important;
}

But how would I go about applying this conditionally if I do not have access to the pane component? I want to avoid having to do something like

  const elements = document.querySelectorAll('.react-flow__pane');

to programmatically add and remove the class

[bcakmakoglu]

You could still use css + a dynamic class name and do something like this:

<ReactFlow className={isLoading ? 'cursor-progress' : ''} ...>

.react-flow.cursor-progress .react-flow__pane {
	cursor: progress; /* add !important if necessary */
}