Как я могу стилизовать вложенный радиовход или как заставить реагировать управляющие входные сигналы и метки?

Question

У меня есть загадка,

Я делаю управляемые радио-кнопки в реакции и стилизую их так, чтобы они выглядели как обычные кнопки, но ...

Я не знаю, как их сделать полностью контролируется при наличии метки и ввода в виде братьев и сестер, что и требуется для используемой мной техники стилевого оформления, или ...

Я не знаю, как стилизовать кнопки полностью по-своему, делая они полностью контролируются ...

Так что я не знаю, как это делается, но мне нужно сделать эти кнопки полностью настраиваемыми и полностью управляемыми ... не знаю, как этого добиться с помощью реакции и / или css / css -in- js.

Если вам интересно, мне действительно нужно, чтобы переключатели полностью контролировались, потому что, если они не совпадают, то разрывы инкапсуляции компонентов, и я повторно использую этот компонент на том же самом страница несколько раз. Если у меня есть id и class и for в атрибутах, то каждый экземпляр в конечном итоге связывается с другим экземпляром, что делает компонент непригодным для использования в моем приложении.

Вот код для родственных радиокнопок:

<NoteInput
  type="radio"
  name="notes"
  value="c"
  id="c"
  label="c"
  scale={scale}
  checked={radioValue === `c`}
  onChange={{handleRadioChange}
/>
<NoteLabel
  scale={scale}
  htmlFor="c"
>
  {
    C
  }
</NoteLabel>

и вот код для вложенной радиокнопки:

<NoteLabel>
  <NoteInput
    type="radio"
    value={'c'}
    checked={radioValue === 'c'}
    onChange={handleRadioChange}
  />
  C
</NoteLabel>

второй вариант также меньше кода, что приятно. ..

Теперь вот css для первого варианта, который работает, но не полностью контролируется:

const NoteLabel = styled(motion.label)`
  ${Label}
  width: 4rem;
  height: 4rem;
  ${props =>
    props.scale === 'major' ? css`${MajorButton}` :
    props.scale === 'minor' ? css`${MinorButton}` :
    css`${GreyButton}`
  }
`

const NoteInput = styled.input`
  display: none;
  &:checked + ${NoteLabel} {
    background: ${props =>
      props.scale === 'major' ? css`hsla(${Major}, 1)` :
      props.scale === 'minor' ? css`hsla(${Minor}, 1)` :
      css`${GreyButton}`
    };
  }
`

Цвета и основные стили ярлыков c определены в css блокирует и работает должным образом, но самое важное здесь - это использование селектора-брата (+), который заставляет работать jsx первого варианта. Вложение данных внутри метки нарушает этот подход, но я не знаю, как добиться того же эффекта, не используя селектор брата. В css нет родительского селектора, поэтому я не могу выбрать родительский элемент для ввода, который бы позволил этой технике работать для вложенных входных данных, я верю, хотя и не уверен ...

... и Вот как выглядят переключатели с этим стилем:

Обратите внимание, что первый ряд кнопок представляет собой набор взаимоисключающих кнопок, которые позволяют Пользователь выбирает тип музыкальной шкалы, а второй ряд взаимоисключающих кнопок - это набор кнопок, которые позволяют пользователю выбрать root для шкалы, в этот момент на клавиатуре появляются примечания для этой шкалы.

Итак, в конечном итоге мне нужен внешний вид обычной кнопки (прямоугольник с закругленными углами с надписью внутри), но поведение переключателя, и я хочу, чтобы они полностью контролировались по реакции (нет for или id, et c ...), чтобы не нарушать инкапсуляцию, что сделало бы компонент по существу бесполезным для меня.

И я совершенно не против использования обычного * 10 43 *, при условии, что я могу воссоздать то же поведение, что и радио-кнопки, а именно то, что только одна кнопка из группы кнопок может быть выбрана одновременно и остается выбранной, пока не будет сделан другой выбор.

Если что-то неясно, пожалуйста, дайте мне знать, и я обновлю вопрос с любыми необходимыми изменениями ...

Спасибо: -)