TechQA.

Components based on Chakra from my own library don't get themed

864 views Asked by At

I started a component library, based on tsdx --template react-with-storybook, added chakra-ui/react as a dependency, then created components in it.

The components use colors from Chakra's default theme -- in particular, blue.700.

In Storybook, I wrap the component in <ChakraProvider>, and it works. I build the library and put it in npm.

Now in my application (based on create-react-app), I install the library, import and apply the <ChakraProvider>, use the component -- and it works, except for the styling.

In the HTML source I can see that the color is still the string "blue.700", so this wasn't translated to a color using the theme.

This Chakra UI bit:

<Box
    boxSizing="border-box"
    width={`calc(${width} + ${scrollbarWidth}px)`}
    backgroundColor="blue.700"
    color="gray.100"
>

Is turned into this CSS class that the resulting div has:

.css-p8523l {
    box-sizing: border-box;
    width: calc(1200px + 0px);
    background-color: blue.700;
    color: gray.100;
}

ChakraProvider clearly does things, for instance there are many CSS variables added to the page, including --chakra-colors-blue-700.

I thought that maybe the ChakraProvider used in my app (from its own @chakra-ui/react dependency) used a different React context than the one in the library, so I decided to add an export in the library (export { ChakraProvider } from '@chakra-ui/react';) and now I import it from my library in the app; but that doesn't have an effect.

What could be going on? Does anyone have an idea how to debug this?

reactjs chakra-ui tsdx
Original Q&A
1

There are 1 answers

1
v1ctor On

My solution was to configure the provider as the documentation says

import type { AppProps } from "next/app";
import { ChakraProvider } from "@chakra-ui/react";
import customTheme from "../context/theme/theme";

function App({ Component, pageProps }: AppProps) {
    return (
        <ChakraProvider theme={customTheme}>
            <Component {...pageProps} />;
        </ChakraProvider>
    );
}

export default App;

My context/theme/theme.tsx

// 1. import `extendTheme` function
import { theme, extendTheme, type ThemeConfig } from "@chakra-ui/react";

// 2. Add your color mode config
const config: ThemeConfig = {
    initialColorMode: "dark",
    useSystemColorMode: false,
};

const fontWeights = {
    ...theme.fontWeights,
    hairline: 100,
    thin: 200,
    light: 300,
    normal: 400,
    medium: 600,
    semibold: 600,
    bold: 700,
    extrabold: 800,
    black: 900,
};

const fonts = {
    heading: "Roboto, system-ui, sans-serif",
    body: "Roboto, system-ui, sans-serif",
    mono: "Menlo, monospace",
};

const radii = {
    none: "0",
    sm: "5px",
    base: "0.25rem",
    md: "8px",
    lg: "0.5rem",
    xl: "0.75rem",
    "2xl": "1rem",
    "3xl": "1.5rem",
    full: "9999px",
};

const fontSizes = {
    ...theme.fontSizes,
    xs: "0.75rem",
    sm: "0.875rem",
    md: "1rem",
    lg: "1.125rem",
    xl: "1.25rem",
    "2xl": "1.5rem",
    "3xl": "1.875rem",
    "4xl": "2.25rem",
    "5xl": "3rem",
    "6xl": "54px",
    "7xl": "4.5rem",
    "8xl": "6rem",
    "9xl": "8rem",
};

const colors = {
    ...theme.colors,
    purple: {
        ...theme.colors.purple,
        500: "#8257e5",
    },
    gray: {
        ...theme.colors.gray,
        300: "#e1e1e6",
        600: "#29292e",
        700: "#202024",
        800: "#121214",
    },
};

// 3. extend the theme
const customTheme = extendTheme({
    config,
    fonts,
    fontWeights,
    radii,
    fontSizes,
    colors,
});

export default customTheme;

And my _document.tsx

import { ColorModeScript } from "@chakra-ui/react";
import NextDocument, { Html, Head, Main, NextScript } from "next/document";
import theme from "../context/theme/theme";

class Document extends NextDocument {
    render(): JSX.Element {
        return (
            <Html>
                <Head>
                    <link
                        rel="preconnect"
                        href="https://fonts.googleapis.com"
                    />
                    <link rel="preconnect" href="https://fonts.gstatic.com" />
                    <link
                        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
                        rel="stylesheet"
                    ></link>
                </Head>
                <body>
                    <ColorModeScript
                        initialColorMode={theme.config.initialColorMode}
                    />
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

export default Document;

ref: https://chakra-ui.com/getting-started/nextjs-guide

Related Questions in REACTJS

Related Questions in CHAKRA-UI

Related Questions in TSDX

Popular Questions

Trending Questions