RadixUI 样式无线电组

Question

我对 Radix UI（使用 Shadcn/ui）和样式组件相当陌生。无法找到使 JSX 组件适应 Radix UI 的解决方案：

我正在使用 Radix UI Radio Groups 并希望对我的组件进行样式设置，该组件在选择时看起来像这样，基本上它是来自 Hyper UI 的这个组件，称为带有堆叠内容的网格并选中：

一些注意事项

• 我正在使用 NextJS 13、typescript 以及 React :D
• 通过对下面的代码进行小调整，我可以使单选图标在选择时出现，但边框不会被激活。
• 这个想法是让块边框具有这些边框（未选择的边框将具有细边框。
• 目前在代码中我将

  {children}

  添加到

  RadioGroupPrimitive.Indicator

  我知道这是错误的，因为它只处理按钮，因此文本仅出现在选择上。

我想我应该以某种方式使用标签，但由于选择的是整个块+图标，似乎我无法将标题和副标题正确地放入其中。

我目前正在尝试尝试，我发现的是：

const RadioGroupItemModern = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, children, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        `block w-full bg-white p-3 hover:border-gray-200 focus:outline-none checked:ring-primary `,
        // "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >

    
        <RadioGroupPrimitive.Indicator className="p-4 cursor-pointer rounded-lg border ring-2 ring-primary flex justify-between items-center hover:border-gray-200 focus:ring-2" >
        <div>{children}</div>
          <Icons.checkCircle3 className="h-6 w-6 text-current" />
        </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>


  )
})
RadioGroupItemModern.displayName = RadioGroupPrimitive.Item.displayName

我的前端调用将如下所示：

<RadioGroupItemModern key={choice.value} value={choice.value} id={choice.value} defaultValue={field.value || ''} >
    <div>
    <RadioGroupItemTitle>{choice.text}</RadioGroupItemTitle>
    <RadioGroupItemSubtitle>{choice.description}</RadioGroupItemSubtitle>
    </div>
</RadioGroupItemModern>

所以现在它只在我按下选择时显示所需的结果（在这种情况下是不可见的）。

我尝试使用 Radix Primitives，以不同的方式添加子项，但由于我无法弄清楚如何正确工作的逻辑，因此无法找出一种方法，因为 Radix 的组无线电和标签旁边有不同的标签组件。

Answer 1

您必须使用

aria-checked:

而不是

checked:

，因为 Radix 组件将输入包装在按钮中。请在此处查看 RadixUI 和 shadcn/ui 的最小可能实现：

<FormItem className="block w-full space-x-3 space-y-0">
  <FormControl>
    <RadioGroupItem value="myValue" className="peer hidden" />
  </FormControl>
  <FormLabel className="block cursor-pointer rounded-md border border-border p-4 font-normal shadow-sm hover:border-primary peer-aria-checked:border-primary peer-aria-checked:ring-1 peer-aria-checked:ring-ring">
    My Label
  </FormLabel>
</FormItem>