Question

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

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上以您的代码为例（使用一些随机颜色而不是主题颜色）。

您忘记在标签中插入道具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

1 个答案: