How change Checkbox body styles depeding of its input state at Mantine?

Question

I'm using Mantine and have to implement a specific styled container for Checkbox input.

This checkbox will change its body styles depending of the input state(checked or not checked). Therefore, to change checkbox' container body style, I need to know the checkbox' input pseudo class state.

Inside the theme file. I have something like this:

Checkbox: {
      styles: theme => ({
        body: {
          background: "white",
        },
        "input:checked": {
          body: {
            background: "black",
          }
        },
      }),
    },

This body and input value comes from StylesAPI from Mantine:

Any idea how can I achieve this?

Thank you in advance!

Answer 1

Can you try this one:

Checkbox: {
  styles: theme => ({
    body: {
      background: "white",
    },
    input: {
      "&:checked": {
        background: "black",
      }
    },
  }),
},