How do I change the color of a Mantine component label?-CodePudding

Here's how you define a checkbox in using the Mantine library:

<Checkbox value="react" label="React"/>

While I'm able to change the color of the checkbox itself, I don't know how to change the color of the label itself.

Here's further reference: https://mantine.dev/core/checkbox/

Could someone help? Thanks.

I tried going into the Checkbox component but doesn't seem I can change the label color using one of the props. I also tried using className of tailwindCSS but it doesn't seem to have any effect as my config uses a dark them and my app is wrapped around the Mantine component.

     <MantineProvider
        withGlobalStyles
        withNormalizeCSS
        theme={{
          /** Put your mantine theme override here */
          colorScheme: 'dark',
        }}
      >
        <Component {...pageProps} />
      </MantineProvider>

CodePudding user response：

It seems that the component document page does provide a class name for styling the label, so if the goal is to change the color inline perhaps try with the sx prop:

<Checkbox
  value="react"
  color="pink"
  label="React"
  sx={{ ["& .mantine-Checkbox-label"]: { color: "hotpink" } }}
/>

The library also provide a useMantineColorScheme hook, which perhaps could be used to further style it based on color theme if needed.

Quick example with color theme enabled: stackblitz

const { colorScheme, toggleColorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark";

<Checkbox
  value="react"
  color="pink"
  label="React"
  onChange={() => toggleColorScheme()}
  sx={{
    ["& .mantine-Checkbox-label"]: { color: dark ? "hotpink" : "blue" },
  }}
/>