Я пытаюсь изменить цвет границы на своих ярлыках. Когда я передаю свой компонент в другой, все работает нормально, но границы, наведение и активный стиль не отображаются. Что я делаю не так? Когда я заменяю код на границе или парящий / активный на один шестнадцатеричный цвет или цвет из моей темы, чем все в порядке, я вижу изменения цвета.

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 ={amp}gt; { 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!!!!'); }}; {amp}amp;:hover, {amp}amp;:active { background-color: ${props ={amp}gt; { 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 ( {amp}lt;Label{amp}gt; {amp}lt;Input type="radio" value={value} name={name} /{amp}gt; {field} {amp}lt;/Label{amp}gt; ); } 

Импортированные радио кнопки выглядят так

 {amp}lt;PriorityRadioButtons name="priority" value="normal" field="Normal" required /{amp}gt; {amp}lt;PriorityRadioButtons name="priority" value="medium" field="Medium" required /{amp}gt; {amp}lt;PriorityRadioButtons name="priority" value="high" field="High" required /{amp}gt;