[CSS] radio input 지우고 label을 버튼으로 사용하기

👆 React+styled-components에서 적용 / 문제발생

styled-components 를 이용해 라디오버튼은 display:none 으로 지우고,
라벨을 버튼처럼 사용하려고 했는데, 동작하지 않았다.

<Label htmlFor={product}>
  {product}
 </Label>
<input 
  type='radio'
  name='radio'
  id={product}
  value={product}
  defaultChecked={index === 0 ? true : false}
 />

const Label = styled.label`
	.
	.
	.
	
	:hover {
		background-color: yellow;
		color: white;
	}

	input[type='radio']:checked + & {
		background-color: orange;
	}
`

(테스트를 위해 radio버튼은 지우지 않았음)

---

👆 해결 방법

<input 
  type='radio'
  name='radio'
  id={product}
  value={product}
  defaultChecked={index === 0 ? true : false}
 />
<Label htmlFor={product}>
  {product}
 </Label>

그런데 label과 input[type='radio']의 위치를 바꿔주니 정상적으로 적용되었다.

styled-component 안에 작성한 스타일 코드는
input 밑에 있는 라벨에게 스타일을 주게 되는거라 동작하지 않은 것이었다.
(아래 코드와 같은 형태)

<label>
<input type="radio"/>
<label></label>
</label>

---

CSS는 순서가 중요합니다.
요소 순서를 고려해 사용해야겠다.