Is it advisable to use asChild prop on ToggleGroupItem with Toggle component inside

[joseDaKing]

I have many components that look the same and have the same styles, which I think is unnecessary that's why I wonder if it is possible and advisable to compose radix components with each other via the asChild prop.

const App = () => {
  return (
    <ToggleGroup.Root>
      <ToggleGroup.Item asChild>
        <Toggle>
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}

[jjenzz]

As long as you are using all of the required parts from each component, it should be fine to compose them using asChild if the underlying node type is the same. For example, ToggleGroup.Item is a button so the child should ideally be a button too otherwise you may face accessibility/functionality issues.