Consuming default + custom styles with ChakraBaseProvider #7960
Unanswered
codentacos
asked this question in
Q&A
Replies: 1 comment
-
You can use theme extensions to do that. import { extendBaseTheme, theme as chakraTheme } from "@chakra-ui/react";
import Modal from './components/Modal';
// Chakra’s own theme styles
const baseTheme = {
components: {
Drawer: chakraTheme.components.Drawer,
Modal: chakraTheme.components.Modal,
},
};
// All your theme styles, including the custom overrides
const customTheme = {
components: {
Drawer,
Modal,
},
};
const theme = extendBaseTheme(baseTheme, customTheme);
export default theme; |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
There doesn't seem to be any documentation around doing this so I wanted to ask here. I'm attempting to use
ChakraBaseProvider
to reduce bundle size. I have some components that utilize custom styling however I still want them to inherit the default styles as well. I can't seem to get a component to correctly receive both the default and custom styles. Example code below.theme/index.ts
Modal.ts
Beta Was this translation helpful? Give feedback.
All reactions