Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Font wont apply to RSBS #261

Open
ARiyou2000 opened this issue May 2, 2023 · 3 comments
Open

Font wont apply to RSBS #261

ARiyou2000 opened this issue May 2, 2023 · 3 comments

Comments

@ARiyou2000
Copy link

I have NEXT.JS 13, React 18, TailwindCSS 3, React Spring Bottom Sheet(RSBS) ^3.4.1 & my custom local font named YekanBakh installed with following config:

NEXT.JS font provider:

// _app.js
const myFont = localFont({
    src: './fonts/YekanBakh-VF.ttf',
    variable: '--font-yekan_bakh',
})
export default function App({Component, pageProps}) {
    return (
        <main className={`${myFont.variable} font-sans`}>
            <Component {...pageProps} />
        </main>
    )
}

TailwindCSS defalt font setting:

// tailwind.config.js
const {fontFamily} = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
        './app/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ['YekanBakhTry', 'var(--font-yekan_bakh)', ...fontFamily.sans],
            },
        },
    },
    plugins: [],
}

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:

const TestRSBS = () => {
    const [open, setOpen] = useState(false);

    const onBottomSheetDismiss = useCallback(() => {
        setOpen(false)
    }, []);

    return (
        <>
            <button onClick={() => setOpen(true)}>Open RSBS</button>

            <BottomSheet
                open={open}
                onDismiss={onBottomSheetDismiss}
                snapPoints={({minHeight}) => minHeight}
            >
                <div className={"p-4 flex flex-col justify-between items-center"}>
                    <div style={{height: 100, width: 100, backgroundColor: 'red'}}/>
                    <button onClick={onBottomSheetDismiss} className={"w-full p-3"}>
                        <h2 className={"text-center align-middle font-bold text-sm leading-6 font-sans"}>TEST FONT HERE</h2>
                    </button>
                </div>
            </BottomSheet>
        </>
    )
}
@ARiyou2000
Copy link
Author

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] */

@ARiyou2000 ARiyou2000 changed the title Local font wont apply to sheet modal Font wont apply to RSBS May 2, 2023
@ARiyou2000
Copy link
Author

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.

@aniruddha-mithya
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ARiyou2000 @aniruddha-mithya