Использование псевдокода для стилизации переключателя с помощью styled-компонентов

Question

Я начинаю понимать, как работают стилевые компоненты, но одной из проблем, с которыми у меня возникают проблемы, является псевдокод. Для меня, на данный момент, похоже, не работает, как ожидалось. Я хочу, чтобы переключатель отображал чек внутри кнопки. Стиль кнопки корректен, но флажок не отображается.

Стилизованный компонент

export const FormRadio = styled.input.attrs(props => ({
    type: 'radio',
    name: 'action',
    id: 'action-radio-1',
    value: props.value,
}))`
    appearance: none;
    display: inline-block;
    position: relative;
    background-color: #f1f1f1;
    color: #254294;
    height: 1.5em;
    width: 1.5em;
    border: 0;
    border-radius: 1em;
    cursor: pointer;
    margin-right: 0.274vw;
    outline: none;

    &:checked::before {
        position: absolute;
        font: 17px/1 'Open Sans', sans-serif;
        left: 0.45em;
        top: 0.12em;
        content: '\02143';
        transform: rotate(40deg);
    }
`;

Answer 1

ваш контент, кажется, нарушает его. и так как он расположен absolute, вам нужно добавить width и height к стилю.

Итак, что-то вроде этого должно работать (обратите внимание, я упростил компонент, чтобы сосредоточиться на checked:before:

const Test = styled.input`
&[type="radio"]{

  position: absolute
  &:checked:before{
      content:"";
      font: 17px/1 'Open Sans', sans-serif;
      position:absolute;
      width: 100%;
      height: 100%;
      background:orange;
      border-radius: 100%;
      left: 0;
      top: 0;
    }

}

`;