-
Notifications
You must be signed in to change notification settings - Fork 129
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.
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
Font wont apply to RSBS #261
Comments
I have temporarily solved this issue by changing my global CSS and adding fonts and font face directly to the RSBS Root container. Global CSS setting:/* 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. |
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 |
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:
The text was updated successfully, but these errors were encountered: