如何在Mantine中根据Checkbox输入状态修改其body样式？

你原来的写法无法生效，因为Mantine的StylesAPI不能直接把input:checked作为独立样式键嵌套修改body样式。正确的做法是利用CSS选择器关联状态，或者借助组件根元素的data-checked属性实现需求，以下是几种可行方案：

方案一：利用兄弟选择器关联input状态 #

通过CSS的:has伪类（现代浏览器均支持），让body在同级input被选中时变更样式：

Checkbox: {
  styles: theme => ({
    body: {
      background: "white",
      // 相邻input被选中时，修改body背景色
      '&:has(~ input:checked)': {
        background: "black"
      }
    },
  }),
},

方案二：借助根元素的data-checked属性 #

Mantine的Checkbox在选中时会给根元素添加data-checked="true"属性，可通过该属性控制body样式：

Checkbox: {
  styles: theme => ({
    body: {
      background: "white",
      // 父级root处于选中状态时，修改body样式
      '[data-checked="true"] &': {
        background: "black"
      }
    }
  }),
},

方案三：通过root样式嵌套修改 #

在root的样式中，针对选中状态下的body进行样式覆盖：

Checkbox: {
  styles: theme => ({
    body: {
      background: "white"
    },
    root: {
      '&[data-checked="true"]': {
        '& .mantine-Checkbox-body': {
          background: "black"
        }
      }
    }
  }),
},

这三种方案都能实现需求，推荐方案二，写法简洁且兼容性更好。

内容的提问来源于stack exchange，提问作者Otavio Augusto