我有一個用CSS樣式的單選按鈕組件。我目前面臨的問題是，我需要選擇組件中radio輸入的兄弟元素的子元素的::after偽元素。

import React, {HTMLProps} from 'react';
import {twMerge} from "tailwind-merge";

const Radio: React.FC<{ className?: string } & HTMLProps<HTMLInputElement>> = ({className = '', ...props}) => {
    return (
        <div className='w-full'>
            <input
                {...props}
                className={twMerge('peer', className)}
                type='radio'
            />
            <label className='cursor-pointer text-base flex gap-4 peer-checked:[&>span:after]:bg-primary' htmlFor={props.id}>
                <span className='h-7 w-7 rounded-full border-4 border-primary block
                flex items-center justify-center
                    after:block after:w-3.5 after:h-3.5 after:bg-primary after:rounded-full after:opacity-0
                '/>
                {props.label}
            </label>
        </div>
    );
};

export default Radio;

span元素上有after:opacity-0類，它使span::after偽元素不可見。您可以在la bel元素上使用下面的類，使span::after在單選按鈕被選中時可見。

peer-checked:[&>span:after]:opacity-100