Chakra-ui组件的自定义样式

Question

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

我已经创建了一个名为readonly的变体，但是该变体中的样式没有应用于无线电标签。

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

包含该变体的自定义样式：

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

Answer 1

如果您检查dev工具中的Chakra收音机，您将看到一些类属性，其中包括一个双下划线。

​

​

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

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

您的变体的自定义样式如下所示，其part为“label”：

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