stipsan/react-spring-bottom-sheet

Font wont apply to RSBS

ARiyou2000 opened this issue · 4 comments

ARiyou2000 commented

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 commented

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 commented

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.

  • 👍1
aniruddha-mithya commented

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