How to make the two states of a Switch with text have the same appearance?

[ziyuang]

CodeSandbox

I use Switch to switch between two options, so semantically it is not "enabled" vs. "disabled" and I want to make the appearance of the wrapper and the texts to look the same under either state. I have changed the background color to identical, but how can the text colour be equated?

Also it seems NextUI will clear the classes passed to startContent and endContent? If at all possible, I would also like to give ml-1 to the left label and mr-1 to the right label. How to do it? Thanks.

[wingkwong]

I have changed the background color to identical, but how can the text colour be equated?

You can pass your custom classes to endContent (or startContent)

endContent: "text-success-foreground"

Also it seems NextUI will clear the classes passed to startContent and endContent? If at all possible, I would also like to give ml-1 to the left label and mr-1 to the right label. How to do it? Thanks.

Not really. If you are talking about margin, then you won't see any changes because label has absolute class. I think what you can do is to increase the width and adjust the padding.

[ziyuang]

Setting classes for endContent works, thanks.

As for the label's classes, the generated element (say the label for Opt1) is always

<label width="1em" height="1em"
  class="z-0 absolute left-1.5 rtl:right-1.5 rtl:left-[unset] text-current text-small opacity-0 scale-50 transition-transform-opacity group-data-[selected=true]:scale-100 group-data-[selected=true]:opacity-100">
    Opt1
</label>

And I don't see changes in class after I changed the label's className, say, to "w-10 pl-1".

[ziyuang]

I got it. I just cannot set the classes via <label className="..."/>. Everything goes to startContent and endContent.

[ziyuang]

How to clear some classes by the way? Say, I want to clear the group-data-[pressed=true]:* classes.

[wingkwong]

You can't remove those system classes. However, you can append other classes to override them.