Overriding the theme CSS of Box - react-native

Question

I'm trying to develop the front end of an application and I wanted to theme some boxes.
I pulled an example from here:
// theme.js
import { extendTheme } from "#chakra-ui/react"
const theme = extendTheme({
components: {
Button: {
// 1. We can update the base styles
baseStyle: {
fontWeight: "bold", // Normally, it is "semibold"
},
// 2. We can add a new button size or extend existing
sizes: {
xl: {
h: "56px",
fontSize: "lg",
px: "32px",
},
},
// 3. We can add a new visual variant
variants: {
"with-shadow": {
bg: "red.400",
boxShadow: "0 0 2px 2px #efdfde",
},
// 4. We can override existing variants
solid: (props) => ({
bg: props.colorMode === "dark" ? "red.300" : "red.500",
}),
},
},
},
})
export default theme
and adapted it to this test-code
const theme = extendTheme({
components: {
Box: {
// 1. We can update the base styles
baseStyle: {
},
// 2. We can add a new button size or extend existing
sizes: {
},
// 3. We can add a new visual variant
variants: {
Mini: {
fontWeight: "bold", // Normally, it is "semibold"
textDecoration: "underline",
boxShadow: "0px 30px 5px -20px rgba(0,0,0,0.75)"
}
},
},
},
})
The idea is that I can say <Box variant="Mini">, but that's not actually working. None of the styles have any affect on the box or it's content.
If I change Box: to Text: and add a Text element <Text variant="Mini">test</Text>, the styles are applied. It's also not working for Grid but does for Button
What am I doing wrong?
I do know that Box has a boxShadow property, but it's very limited.

Answer 1

I still haven't figured out how to modify Box with CSS, partly because the answer I'm about to give doesn't list a file for Box.
There's a note on the page
If you're curious as to what component styles you can override, please reference the default component style files.
When I wanted to modify Drawer, I found the same issue. I went to that link and opened drawer.ts. In there I found this function
const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
overlay: baseStyleOverlay,
dialogContainer: baseStyleDialogContainer,
dialog: baseStyleDialog(props),
header: baseStyleHeader,
closeButton: baseStyleCloseButton,
body: baseStyleBody,
footer: baseStyleFooter,
})
Which gives me some useful keys. I then found of I modified my theme styles like so, I could modify facets as expected.
import { extendTheme } from '#chakra-ui/react';
let theme = extendTheme({
components: {
Drawer: {
baseStyle: {
dialog: {
bg: "blue",
},
closeButton: {
bg: "hotpink",
},
header: {
bg: "red",
},
},
},
}
});

Answer 2

read the documentation in layer styles, i had the same problem with Grid component and also tried the same as you, thanks for the answer
https://chakra-ui.com/docs/theming/component-style#usestyleconfig-api
https://chakra-ui.com/docs/features/text-and-layer-styles