react-spreadsheet icon indicating copy to clipboard operation
react-spreadsheet copied to clipboard

Add a way to specify style import order

Open nzayatz14 opened this issue 10 months ago • 0 comments

Hello!

I am using the spreadsheet component inside of a project that is using MUI as its main component library. I am overriding several components using the following props

Table
DataViewer
CornerIndicator
RowIndicator
ColumnIndicator
Cell
DataEditor

I am currently having an issue where the styles of the spreadsheet are overwriting the styles given to each of my components via the sx property. It looks like the react-spreadsheet styles are being added at the end of my <head> tag on first load of the page. On a page refresh, the react-spreadsheet styles seem to load before any of the mui styles, which corrects the styling.

After some digging, it looks like the styles for react-spreadsheet are currently being generated via javascript with the following block.

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = ".Spreadsheet {\n  --background-color: white;\n  --text-color: black;\n  --readonly-text-color: rgba(0, 0, 0, 0.4);\n  --outline-color: #4285f4;\n  --outline-background-color: rgba(160, 195, 255, 0.2);\n  --border-color: hsl(2deg, 0%, 91%);\n  --header-background-color: rgba(0, 0, 0, 0.04);\n  --elevation: 0 2px 5px rgba(0, 0, 0, 0.4);\n\n  position: relative;\n  overflow: visible;\n  background: var(--background-color);\n  color: var(--text-color);\n  display: inline-block;\n}\n\n.Spreadsheet--dark-mode {\n  --background-color: black;\n  --text-color: white;\n  --readonly-text-color: rgba(255, 255, 255, 0.4);\n  --header-background-color: rgba(255, 255, 255, 0.04);\n  --border-color: hsl(2deg, 0%, 19%);\n}\n\n.Spreadsheet__active-cell {\n  position: absolute;\n  border: 2px solid var(--outline-color);\n  box-sizing: border-box;\n}\n\n.Spreadsheet__active-cell--edit {\n  background: var(--background-color);\n  box-shadow: var(--elevation);\n}\n\n.Spreadsheet__table {\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n\n.Spreadsheet__cell,\n.Spreadsheet__active-cell {\n  cursor: cell;\n}\n\n.Spreadsheet__cell {\n  outline: none;\n}\n\n.Spreadsheet__cell--readonly {\n  color: var(--readonly-text-color);\n}\n\n.Spreadsheet__cell,\n.Spreadsheet__header {\n  min-width: 6em;\n  min-height: 1.9em;\n  height: 1.9em;\n  max-height: 1.9em;\n  border: 1px solid var(--border-color);\n  overflow: hidden;\n  word-break: keep-all;\n  white-space: nowrap;\n  text-align: left;\n  box-sizing: border-box;\n  user-select: none;\n}\n\n.Spreadsheet__header {\n  background: var(--header-background-color);\n  color: var(--readonly-text-color);\n  text-align: center;\n  font: inherit;\n}\n\n.Spreadsheet__header--selected {\n  background: #5f6268;\n  color: #fff;\n}\n\n.Spreadsheet__header,\n.Spreadsheet__data-viewer,\n.Spreadsheet__data-editor input {\n  padding: 4px;\n  box-sizing: border-box;\n}\n\n.Spreadsheet__data-viewer--preserve-breaks {\n  white-space: pre-wrap;\n}\n\n.Spreadsheet__data-editor,\n.Spreadsheet__data-editor input {\n  width: 100%;\n  height: 100%;\n}\n\n.Spreadsheet__data-editor input {\n  font: inherit;\n  color: inherit;\n  background: none;\n  border: none;\n  outline: none;\n  margin: 0;\n}\n\n.Spreadsheet__data-viewer--boolean {\n  text-align: center;\n}\n\n.Spreadsheet__floating-rect {\n  position: absolute;\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n.Spreadsheet__floating-rect--hidden {\n  display: none;\n}\n\n.Spreadsheet__floating-rect--selected {\n  background: var(--outline-background-color);\n  border: 2px var(--outline-color) solid;\n}\n\n.Spreadsheet__floating-rect--dragging {\n  border: none;\n}\n\n.Spreadsheet__floating-rect--copied {\n  border: 2px var(--outline-color) dashed;\n}\n";
styleInject(css_248z);

My guess is since these styles are being generated via JS instead of just being imported in an existing stylesheet, this function just gets run after all of the MUI styles are built. Is there any way I can make the component insert the styles at the top of the head tag? It looks like the function supports a ref.insertAt === 'top' condition, but there is no way to set this value.

Thanks!

nzayatz14 avatar Apr 02 '24 16:04 nzayatz14