#css 12 articles
A docked side panel floats in mid-air on the newer SharePoint layout: .sp-App-bodyContainer is not there gotchas / spfx A Copilot-style side panel narrows the SharePoint page by shrinking .sp-App-bodyContainer. On the newer page chrome (left app bar with Discover/Publish/Build) that container does not exist, so the docking code silently… A shared component that avoided positioning assumptions still carried a width assumption gotchas / spfx @media never sees the narrow panel you were reused in; measure the element with ResizeObserver and switch every child together A shared component's var() fallback chain is only as good as its last link gotchas / spfx Shared UI package falls through to sans-serif in apps that never publish CSS custom properties; runtime-only, no build catches it A shared stylesheet injected once per page keeps the version that rendered first — your CSS fix may not apply next to an older build gotchas / spfx A library that injects only if the id is missing lets whichever bundle renders first decide the CSS for every web part on the page, so a fixed rule in a newer bundle can silently lose to an older copy that rendered first A theme override on your app root can't reach tokens declared on :root gotchas / spfx The accent inherits, everything derived from it doesn't; substitution happens where the token is declared, portals miss the override entirely, and a colour written as a literal hex is unreachable either way An element selector outranks your button class — and only a themed tenant sees it gotchas / spfx .app-root a { color: inherit } beats .btn--accent, so link-styled buttons get an unreadable label — but only on a tenant whose accent needs white text Importing third-party CSS with url(images/...) breaks the SPFx build gotchas / spfx url(images/...) without ./ kills the build; inject a instead justify-content:center inside overflow:hidden clips content you can never scroll to gotchas / spfx Centering + overflow cuts content above the scroll; flex "springs" Portaled overlays sit outside your CSS reset — hello, phantom scrollbar gotchas / spfx Portal to body escapes the scoped reset; content-box fields overflow and grow a scrollbar position:fixed dropdowns go off-screen inside animated panels — the CSS transform trap gotchas / spfx The CSS transform containing-block trap; portal to document.body Printing from a web part gives a blank page when the print CSS hides body > * and the print layer lives inside the web part gotchas / spfx One way to print a report from an SPFx web part is to hide everything in print (body > * { display: none }, so the SharePoint suite bar, navigation and footer stay out) and show only a dedicated print layer. If that… View formatting drops CSS gradients — use a solid background-color gotchas / lists background is not on the style allowlist and a gradient in background-image did not survive either; a white initial on a gradient avatar turns invisible, so use a solid background-color