使用伪代码为带有样式组件的单选按钮设置样式

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

}

`;