ラジオボタンのラベルの境界線の色を変更します。スタイル付きコンポーネントとReactJS

debugcn 投稿 Dev

パネフスキーP。

ラベルの境界線の色を変更しようとしています。コンポーネントを別のコンポーネントに渡すと、すべてが正常に機能していますが、境界線、ホバー、アクティブなスタイリングが表示されません。私が間違っているのは何ですか？境界線またはホバー/アクティブのコードを単一の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 />

そうすべき

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>
  );
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]