CODEWITHSUNDEEP
chakra-ui
cham
cham

Reputation: 10732

Custom style for part of a Chakra-ui component

I have a Chakra-ui radio button for which I would like to apply a custom style when it is disabled. in particular a disabled Chakra radio uses opacity: 0.4 on its label, whereas I want to set that to 1.

I have created a variant called readonly, but the styling in that variant is not being applied to the radio label.

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

The custom style containing the variant:

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

Upvotes: 1

Views: 3543

Answers (1)

cham
cham

Reputation: 10732

If you inspect the Chakra radio in the dev tools you'll see some class attributes that include a double underscore.

radio_in_dev_tools

These are the parts. We can see that the radio is actually a multi-part component. The label you want to work with is actually a <span>, which is highlighted in the image. It has a class that ends with __label.

Also, you only want to change the opacity when the label is disabled. Using an underscore will allow you to access the disabled state.

Your variant's custom style looks like the following, with a part of 'label' noted:

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

Upvotes: 2

Related Questions