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

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: '143';
        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;
    }

}

`;

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

Using pseudo code to style radio button with styled-components

css

styled-components