CODEWITHSUNDEEP
javascriptreactjsstyled-components
Panevski P.
Panevski P.

Reputation: 105

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

I'm trying to change the border color on my Labels. When I pass my component in another one everything is working fine but the border, hover and active styling is not showing up. What I'm doing wrong? When I replace the code in the border or hover/active with a single hex color or color from my Theming than it is ok I see the color changes.

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

Imported radio buttons look like this

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

Upvotes: 1

Views: 2034

Answers (1)

Deve
Deve

Reputation: 1779

I made an example of your code on https://codesandbox.io/s/icy-hooks-ljw37 (with some random colors not theme colors).

You forgot to insert prop field in Label so it can't adjust style with it.

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

Upvotes: 1

Related Questions