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

您的内容似乎正在破坏它。并且由于其位置为Join，因此需要在样式中添加absolute和width。

因此，类似的事情应该起作用（请注意，我简化了组件，使其专注于height：

checked:before

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

1 个答案: