使用JSS反应反馈之星组件

Question

我仅使用here上的纯CSS创建了一个基本的星级反馈工具。我正在尝试使用JSS在React应用程序中重新创建它。但是，我对JSS还是很陌生，不知道如何在JSS中执行CSS选择器。到目前为止，我已经显示了星星，您可以对其进行检查，但是我正在努力进行悬停。

组件：

<fieldset className={classes.starsContainer}>
      <input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5"><Star className={classes.feedbackStar} /></label>
      <input type="radio" id="star4" name="rating" value="4" /><label class="full" for="star4"><Star className={classes.feedbackStar} /></label>
      <input type="radio" id="star3" name="rating" value="3" /><label class="full" for="star3"><Star className={classes.feedbackStar} /></label>
      <input type="radio" id="star2" name="rating" value="2" /><label class="full" for="star2"><Star className={classes.feedbackStar} /></label>
      <input type="radio" id="star1" name="rating" value="1" /><label class="full" for="star1"><Star className={classes.feedbackStar} /></label>   
</fieldset>

JSS：

starsContainer: {
        border: 'none',
        float: 'left',
        '& > input': {
            display: 'none'
        },
        '& > label': { 
            color: '#fff',
            float: 'right'
        },
        '& > input:checked ~ label': {
            color: 'blue'
        }
},
feedbackStar: {
        fontSize: 60,
        '&:hover': { 
            color: 'green'
        }
},
'starsContainer:not(:checked) > feedbackStar:hover': {
        'starsContainer:not(:checked) > feedbackStar:hover ~ feedbackStar': { 
            color: 'purple',
            textShadow: '0px 1px 2px grey, 0px 1px 2px grey'
        },
},
'starsContainer > input:checked + label:hover': {
        'starsContainer > input:checked ~ label:hover': {
            'starsContainer > label:hover ~ input:checked ~ label': {
                'starsContainer > input:checked ~ label:hover ~ label': { 
                    color: 'black',
                    textShadow: '0px 1px 2px grey, 0px 1px 2px grey'
                },
            }
        }
},