Overriding the theme CSS of Box

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",
        },
      },
    },
  }
});