Theme override problem with pseudo selectors | Mantine | Page 1

Hi, I'm trying to override the Card component styles in my CustomTheme so that they are default for all Cards but the override is not applying the hover styles.

export const customTheme: CustomTheme = createTheme({
  /** Put your mantine theme override here */
  components: {
    Card: {
      defaultProps: {
        withBorder: true,
        shadow: "sm",
      },
      styles: {
        root: {
          backgroundColor: "light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))",
          height: "100%",
          gap: "var(--mantine-spacing-md)",
          position: "relative",
          transition: "transform 150ms ease, box-shadow 150ms ease",

          "&:hover": {
            transform: "scale(1.01)",
            boxShadow: "var(--mantine-shadow-md)",
          },
        },
      },
    },
  },
}) as CustomTheme;

Is this not the correct way to write the style hover property in a custom theme? This works fine if I define the styles in a module.scss file and apply the class directly to a specific card component:

.card {
  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
  height: 100%;
  gap: var(--mantine-spacing-md);
  position: relative;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;

  &:hover {
    transform: scale(1.01);
    box-shadow: var(--mantine-shadow-md);
  }
}

All the other style properties are being applied correctly for the Card in the theme styles definition but the hover fails for some reason. Hover does not show up when I examine the card in the Dev Tools.

#Theme override problem with pseudo selectors