Chakra-ui 单选按钮的自定义样式

Question

我有一个 Chakra-ui 单选按钮，我想在它被禁用时应用自定义样式。特别是禁用的 Chakra 收音机在其标签上使用 opacity: 0.4，而我想将其设置为 1。

我创建了一个名为 readonly 的变体，但该变体中的样式并未应用于单选标签。

      <Radio
        isDisabled={isRadioDisabled}
        value={Number(option.value)}
        variant={"readonly"}
      >
        {option.label}
      </Radio>

包含变体的自定义样式：

{
  baseStyle: {},
  variants: {
    readonly: {
       opacity: 1
    },
  },
}

Answer 1

如果您在开发工具中检查 Chakra 收音机，您会看到一些包含双下划线的类名。

这些是parts。我们可以看到收音机实际上是一个多部分的组件。您要使用的标签在图像中突出显示。它有一个以__label 结尾的类。

此外，您只想在标签被禁用时更改不透明度。使用下划线将允许您访问禁用状态。

您的变体的自定义样式如下所示，并注明part：

{
  baseStyle: {},
  variants: {
    readonly: {
      parts: ["label"],
      label: {
        _disabled: {
          opacity: 1,
        },
      },
    },
  },
}