Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add a way to specify style import order #388

Open
nzayatz14 opened this issue Apr 2, 2024 · 0 comments
Open

Add a way to specify style import order #388

nzayatz14 opened this issue Apr 2, 2024 · 0 comments
Labels
enhancement New feature or request

Comments

@nzayatz14
Copy link

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!
@iddan iddan added the enhancement New feature or request label Jul 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nzayatz14 @iddan