Giter Site home page Giter Site logo

Comments (3)

ARiyou2000 avatar ARiyou2000 commented on May 24, 2024 1

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.

ARiyou2000 avatar ARiyou2000 commented on May 24, 2024

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.

aniruddha-mithya avatar aniruddha-mithya commented on May 24, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.