Флажок не работает в функции отображения реагировать JS CSS

Question

У меня есть функция отображения в файле modifiers.js, которая используется itemlist для отображения флажков во всплывающем окне, после выполнения этой функции отображения флажок перестал работать.Я думаю, что это CSS (скрытый флажок связи), потому что он хорошо работает без CSS.

Modifiers.js

import React from "react";
import "./Modifiers.css";

//import "./Modifiers.scss";

const Modifiers = props => {
  const id = props.childId + props.childp
  return (
    <form className="form">
      <div>
        <h2>{props.title}</h2>
          <div className="inputGroup">
          {props.options && props.options.map(item => {
              console.log(item)
                return (
                    <div>
                      <label for={id}>{item.name}</label>
                      <input
                      id={id}
                      name="checkbox"
                      type="checkbox"
                    />
                    </div>
                )
              })}
          </div>
      </div>
    </form>
  );
};

export default Modifiers;

Modifiers.css

.inputGroup {
  background-color: #fff;
  display: block;
  margin: 10px 0;
  position: relative;
  border-radius: 20px;
}
.inputGroup label {
  padding: 12px 30px;
  width: 100%;
  display: block;
  text-align: left;
  color: #3c454c;
  cursor: pointer;
  position: relative;
  z-index: 2;
  border-radius: 20px;
  transition: color 200ms ease-in;
  overflow: hidden;
}
.inputGroup label:before {
  width: 90%;
  height: 10px;
  content: "";
  background-color: #5562eb;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale3d(1, 1, 1);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  z-index: -1;
}
.inputGroup label:after {
  width: 32px;
  height: 32px;
  content: "";
  border: 2px solid #d1d7dc;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
  background-repeat: no-repeat;
  background-position: 2px 3px;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 200ms ease-in;
}
.inputGroup input:checked ~ label {
  color: #fff;
}
.inputGroup input:checked ~ label:before {
  transform: translate(-50%, -50%) scale3d(56, 56, 1);
  opacity: 1;
}
.inputGroup input:checked ~ label:after {
  background-color: #54e0c7;
  border-color: #54e0c7;
}
.inputGroup input {
  width: 32px;
  height: 32px;
  order: 1;
  z-index: 2;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  visibility: hidden;
}
.form {
  padding: 0 16px;
  max-width: 100%;
  margin: 50px auto;
  font-size: 18px;
  font-weight: 600;
  line-height: 36px;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
code {
  background-color: #9aa3ac;
  padding: 0 8px;
}

и остальной код вы можете найти в кодовой коробке.

https://codesandbox.io/s/p32k93k660?fontsize=14&moduleview=1

Answer 1

внесены изменения: изменена структура html, вместо прозрачности используется непрозрачность, и флажок должен быть выше круга (настраиваемый флажок), поэтому его следует проверять при нажатии на круг.надеюсь это поможет.спасибо

попробуйте добавить ниже код

html

<div class="wrapper">
    <input id="undefinedCoke" name="checkbox" type="checkbox">
    <label htmlfor="undefinedCoke">Coke</label>
    </div>

css

.wrapper {
    position: relative;
}

.inputGroup input {
    width: 32px;
    height: 32px;
    order: 1;
    z-index: 3;
    position: absolute;
    right: 30px;
    top: 31px;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 1;
}