typescript 如何改变Mantine组件标签的颜色?

rkkpypqq  于 2022-12-30  发布在  TypeScript
关注(0)|答案(1)|浏览(154)

下面是如何使用Mantine库在中定义复选框:

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

虽然我可以更改复选框本身的颜色,但我不知道如何更改标签本身的颜色。
以下是进一步的参考:https://mantine.dev/core/checkbox/
有人能帮忙吗?谢谢。
我尝试进入复选框组件,但似乎无法使用其中一个 prop 来更改标签颜色。我也尝试使用tailwindCSS的className,但似乎没有任何效果,因为我的配置使用了黑色的它们,而且我的应用程序是围绕Mantine组件 Package 的。

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

mrfwxfqh1#

组件document页面似乎确实提供了一个类名称来设置标签的样式,因此如果目标是更改内联颜色,也许可以尝试使用sx prop

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

该库还提供了一个useMantineColorScheme挂钩,如果需要,可以使用它根据颜色主题进一步设置样式。
启用颜色主题的快速示例:stackblitz
x一个一个一个一个x一个一个二个x

相关问题