Javascript 在输入字段中放置图标的问题

我做了一个输入，如果它接收图标作为它的子项，那么在输入字段中将有相应的svg图标

我这样做是为了，当我作为孩子传入图标时，将输入文本放到右边，这样它就不会与输入字段中的图标重叠。（请注意，徽标是通过绝对定位完成的。）

然后我设置条件渲染，如下所示：

基于为图标属性设置的布尔值设置条件填充

图标显式设置为false以将占位符粘贴到输入的开头

kControl>

这是我得到的最终结果，其中没有应用条件填充

有趣的是，它将道具正确地作为“假”或“真”接收。当我在css组件中输入console.log icon prop时，它会正确显示布尔值，然后正确填充单词

请告知

            & > *:not(input) {
                color: ${theme.colors.lightGrey};
                position: absolute;
                transform: translateY(70%);
                left: 2rem;
            }

export const DefaultInput = styled.div`
    ${({ theme, icon, colors, bordercolors, fullWidth }) => {
        return css`
            position: relative;
            input {
                width: ${fullWidth ? `100%` : null};
                padding: ${theme.paddings.sm};
                font-size: 1.6rem;
                padding-left: ${icon ? '4rem' : theme.paddings.base};
                height: 100%;
                border: solid 2px;
                border-color: ${theme.colors.lightGrey};
                border-radius: ${theme.borderRadius.roundedFull};
                color: ${theme.colors.grey};
            }

            & > *:not(input) {
                color: ${theme.colors.lightGrey};
                position: absolute;
                transform: translateY(70%);
                left: 2rem;
            }

            input::placeholder {
                color: ${theme.colors.lightGrey};
                font-size: 1.4rem;
            }

            input:focus {
                outline: none;
                border: solid 2px;
                border-radius: ${theme.borderRadius.roundedFull};
                background-color: ${theme.colors[colors]};
                border-color: ${theme.colors[bordercolors]};
            }
        `;
    }}
`;

kControl>

                        <FormikControl
                            icon={false}
                            control='input'
                            type='text'
                            label='nickname'
                            name='nickname'
                            placeholder='Nickname'
                            bordercolors='secondary'
                        ></FormikControl>
                    </FormikContainer>
                </InfoForm>