react-spreadsheet
react-spreadsheet copied to clipboard
Add a way to specify style import order
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!