Не работает чекбокс при добавлении стилей в React.js

Question

Суть такова, есть чекбокс, который генерируется при загрузке страницы. До добавления к нему ♂ Styles ♂ всё работает, а вот после какая-то беда - чекбокс не реагирует на нажатия совсем. Если попробовать отключить стили и чекнуть его а потом добавить стили - чекбокс изменит своё состояние на противоположное. В чём может быть дело? Собсна вот компонент вместе со стилями css ===>>>

import { useState, useEffect } from 'react';
import styles from '../cssModules/RadioButton.module.css'

const CheckBox = (props) => {
    const [checked, setChecked] = useState(true);
    let id = `highload${props.id}`

    return (
        <div>
            <input type='checkbox' className={styles.highload1} name={id} checked={checked} onChange={() => { setChecked(!checked) }} />
            <label htmlFor={id} className={styles.lb1}></label>
        </div>
    )
}
export default CheckBox;

.lb1 {
    margin: 2em;
}

.highload1 {
    display: none;
}

    .highload1 + .lb1, .highload1 + .lb1::before, .highload1 + .lb1::after {
        transition: all .3s;
    }

    .highload1 + .lb1 {
        display: inline-block;
        position: relative;
        width: 34px;
        height: 17px;
        border-radius: 30px;
        cursor: pointer;
    }

        .highload1 + .lb1::before {
            display: block;
            content: attr(data-offlabel);
            position: absolute;
            top: 18px;
            right: 10px;
            color: black;
            font-family: 'Open Sans', sans-serif;
            font-size: 19px;
        }

        .highload1 + .lb1::after {
            border-radius: 50%;
            content: '';
            position: absolute;
            top: -2px;
            left: -3px;
            width: 22px;
            height: 22px;
            background-color: #e83131;
        }

    .highload1:checked + .lb1::before {
        content: attr(data-onlabel);
        left: 16px;
        right: auto;
        color: #fff;
    }

    .highload1:checked + .lb1::after {
        left: 20px;
        background-color: #014287;
    }

    .highload1 + .lb1 {
        background-color: #ccc;
    }

    .highload1:checked + .lb1 {
        background-color: #ccc;
    }

        .highload1:checked + .lb1::before {
            color: #fff;
        }

Answer 1

Свяжите лейбл с инпутом по id, а не по name.

БЛОГ НА HUSL

Не работает чекбокс при добавлении стилей в React.js

Ответы (1 шт):