dynamic-style-tag.js

// Create a new style element
const el = document.createElement('style');
el.type = 'text/css';

// Add it to the head of the document
const head = document.querySelector('head');
head.appendChild(el);

// At some future point we can totally redefine the entire content of the style element
const setStyle = (newStyles) => {
  el.innerHTML = newStyles;
};

// We can apply some styles at one point in the lifecyle
setStyle(`
  [data-react-beautiful-dnd-drag-handle] {
    cursor: grab;
  }
`);

// At another point we can change these styles
setStyle(`
  body {
    cursor: grabbing;
  }

  [data-react-beautiful-dnd-drag-handle] {
    point-events: none;
  }

  [data-react-beautiful-dnd-draggable] {
    transition: transform 0.2s ease;
  }
`);