更改单选按钮上的标签边框颜色。样式化组件和 React JS

Question

我正在尝试更改标签上的边框颜色。当我在另一个组件中传递我的组件时，一切正常，但没有显示边框、悬停和活动样式。我做错了什么？当我用我的主题中的单一十六进制颜色或颜色替换边框或 hover/active 中的代码时，我看到颜色发生了变化。

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 />

Answer 1

我在 https://codesandbox.io/s/icy-hooks-ljw37 上做了一个你的代码示例（一些随机颜色不是主题颜色）。

您忘记在 Label 中插入属性 field，因此无法使用它调整样式。

export default function PriorityRadioButtons({ name, value, field }) {
  return (
    <Label field={field}> // <- it should fix your problem
      <Input type="radio" value={value} name={name} />
      {field}
    </Label>
  );
}

更改单选按钮上的标签边框颜色。样式化组件和 React JS

Changing label border color on a radio button. Styled Components and React JS

javascript

reactjs

styled-components