reactjs - 如何在样式组件中使用伪类？

Question

所以正如我在标题中提到的，当我使用样式化组件时，我想在我的输入中使用::after 但它不起作用..我把我的代码放在下面，所以检查一下

import styled from 'styled-components';

const Input = styled.input`
    padding: 25px 80px;
    border-radius: 100px;
    margin: 15px 0px;
    border: none;
    border: 2px solid ${props => props.theme.colors.grey};
    &:focus {
        outline: none;
        border: 2px solid ${props => props.theme.colors.main};
    }
    ::after {
        content: "hi"
    }
`;

export default Input;

Answer 1

您可以通过以下方式实现:

import styled from 'styled-components';

const div = styled.div`
    padding: 25px 80px;
    border-radius: 100px;
    margin: 15px 0px;
    border: none;
    border: 2px solid ${props => props.theme.colors.grey};
    &:focus {
        outline: none;
        border: 2px solid ${props => props.theme.colors.main};
    }
    &:after {
        content: "hi"
    }
`;

export default Input;

输入元素不允许使用前后伪类