Реагируйте на компонент обратной связи, используя JSS - PullRequest
Новая
       13

Реагируйте на компонент обратной связи, используя JSS

0 голосов
/ 21 мая 2019

Я создал базовый инструмент обратной связи в виде звездочки, просто используя чистый CSS, который можно найти здесь . Я пытаюсь воссоздать его в приложении React с использованием JSS. Однако я довольно новичок в JSS и не знаю, как сделать селекторы CSS в JSS. Пока у меня отображаются звезды, и вы можете проверить их, но я изо всех сил стараюсь при наведении.

Компонент: 

<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'
                },
            }
        }
},
...