时间戳

首页 > 解决方案 > 如何在样式化组件中使用伪类？

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

问题描述

所以正如我在标题中提到的，当我使用样式化组件时，我想在我的输入中使用 ::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;

标签： reactjs

解决方案

您可以通过以下方式实现它：

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;

输入元素不允许使用 before 和 after 伪类

推荐阅读