Customize theme for one specific component | Mantine | Page 1

Hey all, I've been reading some comments here about theming but it's not very clear to me how to override the styles of one specific component. I'm pretty new to Mantine so maybe i'm missing something, what I've learned so far is that I can use an object to override the styles and there's a components property I can use.

That's very clear, but the thing i just want to add the cursor:pointer; to Mantine Checkbox components. Since that property would be categorized as "other" according to MantineTheme type (I think), I was trying to do this

import {MantineThemeOverride} from "@mantine/core"

const theme: MantineThemeOverride = {
  components: {
      Checkbox: {
    other: {
     cursor: "pointer"
      }
    }
  }
}
export default theme

But that gives me an error cuz "other" isn't defined in the type. So what whould be the best option for that? I saw some people in thee server using a "styles" properties and other people using "root" so I'm a bit confused. Thanks in advanced for your answers.

Well, reading a little more I realized what my mistake was. I had to use defaultProps property, now I changed into this

import { MantineThemeOverride } from "@mantine/core";

const theme: MantineThemeOverride = {
  components: {
    Checkbox: {
      defaultProps: {
        color: "black",
        cursor: "pointer",
        size: "xl",
      },
    },
  },
};
export default theme;

But the cursor property isn't working. The other two are fine. Anyone knows the reason?

#Customize theme for one specific component