Closed ARiyou2000 closed 2 weeks ago
I have temporarily solved this issue by changing my global CSS and adding fonts and font face directly to the RSBS Root container. But this solution is only momentary and it will shake the integrity of the project.
/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
/* ---React Spring Bottom Sheet--- */
--rsbs-backdrop-bg: rgba(0, 0, 0, 0.6);
--rsbs-bg: #5C5C5C;
--rsbs-handle-bg: hsla(0, 0%, 56%, 1);
--rsbs-max-w: auto;
--rsbs-ml: env(safe-area-inset-left);
--rsbs-mr: env(safe-area-inset-right);
--rsbs-overlay-rounded: 16px;
--rsbs-antigap-scale-y: 0;
--rsbs-backdrop-opacity: 1;
--rsbs-content-opacity: 1;
--rsbs-overlay-h: 0px;
--rsbs-overlay-translate-y: 0px;
}
@font-face {
font-family: YekanBakhTry;
src: url("./../pages/fonts/YekanBakh-VF.ttf") format("truetype");
}
[data-rsbs-root] {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";;
}
/* [...other RSBS styles] */
I've figgered out the reason.
My font is provided to all components under
<div id="__next">
<main class="__variable_c3054a font-sans">...</main>
</div>
While RSMS is in
<reach-portal>...</reach-portal>
which is a sibling to the main content.
<body>
<div id="__next">...</div>
<reach-portal>...</reach-portal>
<div id="__next-build-watcher">...</div>
<script id="__NEXT_DATA__">...</script>
</body>
TailwindCSS will be provided to hole content, while custom fonts will only apply to dom elements blow font provider. That's why Tailwind CSS style and class names are applied while the font is not.
This is true of multiple libraries where the portal is a sibling of the #__next element. This is not per se an issue with RSBS. More of an issue with Nextjs
With update of next JS and access to html and body, this issue is resolved. At least in the app directory.
I have
NEXT.JS 13
,React 18
,TailwindCSS 3
,React Spring Bottom Sheet(RSBS) ^3.4.1
& my custom local font namedYekanBakh
installed with following config:NEXT.JS font provider:
TailwindCSS defalt font setting:
But it seems even though class and tailwind style are applying to the RSBS body, but font family has reset to
Times New Roman(Browser default)
. This will only happen if you try applying external font in the RSBS body. My component and its styles class name are: