라디오 버튼의 라벨 테두리 색상 변경. 스타일 구성 요소 및 React JS

레이블의 테두리 색상을 변경하려고합니다. 내 구성 요소를 다른 구성 요소에 전달할 때 모든 것이 잘 작동하지만 테두리, 호버 및 활성 스타일이 표시되지 않습니다. 내가 뭘 잘못하고 있니? 테두리의 코드를 바꾸거나 마우스 오버 / 활성 상태에서 테마의 단일 16 진수 색상 또는 색상이 괜찮은 것보다 색상이 변경되는 것을 볼 수 있습니다.

import React from 'react';
import styled from '@emotion/styled';

const Input = styled.input`
  margin: 7px;
`;

const Label = styled.label`
  width: 110px;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin: 1px;
  font-size: 14px;
  text-shadow: 1px 1px 1px #000000;
  background-color: transparent;
  border-radius: 10px;
  border: ${props => {
    if (props.field === 'Normal') {
      return props.theme.colors.priority_normal;
    } else if (props.field === 'Medium') {
      return props.theme.colors.priority_medium;
    } else if (props.field === 'High') {
      return props.theme.colors.priority_high;
    } else console.error('This is not a function!!!!');
  }};
  &:hover,
  &:active {
    background-color: ${props => {
      if (props.field === 'Normal') {
        return props.theme.colors.priority_normal_hover;
      } else if (props.field === 'Medium') {
        return props.theme.colors.priority_medium_hover;
      } else if (props.field === 'High') {
        return props.theme.colors.priority_hover;
      } else console.error('This is not a function!!!!');
    }};
    }
  }
`;

export default function PriorityRadioButtons({ name, value, field }) {
  return (
    <Label>
      <Input type="radio" value={value} name={name} />
      {field}
    </Label>
  );
}

가져온 라디오 버튼은 다음과 같습니다.

<PriorityRadioButtons name="priority" value="normal" field="Normal" required />
<PriorityRadioButtons name="priority" value="medium" field="Medium" required />
<PriorityRadioButtons name="priority" value="high" field="High" required />