如何更改Mantine组件Checkbox的标签文字颜色？

这里给你几个可行的解决方法：

方法1：通过主题全局配置 #

在MantineProvider的theme中直接覆盖Checkbox组件的label样式，所有Checkbox的标签都会统一应用这个颜色：

<MantineProvider
  withGlobalStyles
  withNormalizeCSS
  theme={{
    colorScheme: 'dark',
    components: {
      Checkbox: {
        styles: (theme) => ({
          label: {
            color: '#your-target-color', // 替换为你需要的颜色，也可以用theme内置色值如theme.colors.blue[4]
          },
        }),
      },
    },
  }}
>
  <Component {...pageProps} />
</MantineProvider>

方法2：用sx prop单独定制单个Checkbox #

如果只需要修改某一个Checkbox的标签颜色，直接用sx属性指定label的样式即可：

<Checkbox
  value="react"
  label="React"
  sx={{
    label: {
      color: 'cyan', // 填写任意CSS合法颜色值
    },
  }}
/>

方法3：结合Tailwind使用（解决优先级问题） #

如果一定要用Tailwind，可通过classNames prop给label指定类名，同时为了覆盖Mantine的默认样式，需要添加!important提升优先级：

<Checkbox
  value="react"
  label="React"
  classNames={{
    label: 'text-red-500 !important',
  }}
/>

也可以在sx中嵌套Tailwind的类：

<Checkbox
  value="react"
  label="React"
  sx={{
    label: {
      '@apply text-green-500 !important': {},
    },
  }}
/>

内容的提问来源于stack exchange，提问作者Quality Geek