Comments (3)
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.
from react-spring-bottom-sheet.
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.
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] */
from react-spring-bottom-sheet.
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
from react-spring-bottom-sheet.
Related Issues (20)
- Focus trap is not working after changing `blocking`
- requires tap to show on screen -- Android chrome
- Dragging should only work in Dragger Container . Should not draggable in Backdrop.
- BottomSheet resets to previous snap point when trying to track height
- Need Unit Test
- Looks like react-use-gesture is depreciated
- Allow setting an z-Index HOT 5
- Adding contentHeight and headerHeight to ref
- When initialFocusRef is false, elements outside the popup are tabbable despite blocking being enabled HOT 1
- Horizontal scrolling is not working properly when full size is introduced in snapPointList
- conditional fetching with onSpringStart it make glitching issue or ropen twice the bottomsheet HOT 2
- Update dependencies
- How to prevent close? HOT 1
- Doesn't work in React Vite HOT 4
- New maintainer? HOT 1
- Getting height of BottomSheet while transition HOT 1
- show children of bottom sheet when is closed without bottom sheet parent
- Please update the React to latest version HOT 1
- TypeError: Cannot read properties of undefined (reading 'getValue') HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-spring-bottom-sheet.