代码之家 › 专栏 › 技术社区 › GÊá´á´á´ÊCá´á´

为什么我的:before&:after伪元素没有在我的Styled Components中呈现?

pseudo-element styled-components reactjs css

GÊá´á´á´ÊCá´á´ · 技术社区 · 2 年前

出于某种原因,在实现时我遇到了渲染问题 content 在一个 :before 或 :after 伪元素。给定剥离的组件:

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Container = styled.div`
  display: block;
  padding: 1rem;
`;

const Foo = styled.p`
  &:before {
    content: '\201C';
    display: block;
    font-size: 4rem;
    font-weight: bold;
    height: 4.25rem;
  }

  &:after {
    content: '\201D';
    display: block;
    font-size: 4rem;
    font-weight: bold;
    height: 2.625rem;
  }

  font-weight: bold;
`;

function Test({ txt }) {
  return (
    <Container>
      <Foo>{txt}</Foo>
    </Container>
  );
}

Test.propTypes = {
    txt: PropTypes.string.isRequired,
};

export default Test;

没有任何内容被渲染。引用 this answer 从…起 How to render pseudo before content dynamically in styled-component 我试过:

const Foo = styled.p`
  &:before {
    content: '\201C';
    display: block;
    font-size: 4rem;
    font-weight: bold;
    height: 4.25rem;
  }

  &:after {
    content: '\201D';
    display: block;
    font-size: 4rem;
    font-weight: bold;
    height: 2.625rem;
  }

  font-weight: bold;
`;

This answer 建议使用中的双冒号 Can anyone tell me why before not working on styled components? :

const Foo = styled.p`
  &::before {
    content: '\201C';
    display: block;
    font-size: 4rem;
    font-weight: 700;
    height: 4.25rem;
  }

  &::after {
    content: '\201D';
    display: block;
    font-size: 4rem;
    font-weight: bold;
    height: 2.625rem;
  }

  font-weight: bold;
`;

但我无法呈现 before 或 after 。进一步的研究我已经看到内容可能是一个问题,但我根据 Double Quotation 并且应该声明一个高度或宽度,并且我已经确保通过 height 在里面 rem .

使用样式化组件版本 "^5.3.5" ,我已经删除了我的缓存,转储了公共目录,并在Chrome和Firefox中进行了测试,但我无法呈现引号。

研究

我做错了什么?如何渲染伪元素?

0 回复 | 直到 2 年前

jme11 2 年前

编辑时间:

@扎尔科夫-鲁斯兰是正确的。你需要逃离 \ 在content属性中。以下工作:


const Foo = styled.p`
    font-weight: bold;

    &::before {
        content: "\\201C";
        display: block;
        font-size: 4rem;
        font-weight: 700;
        height: 4.25rem;
    }
    &::after {
        content: "\\201D";
        display: block;
        font-size: 4rem;
        font-weight: bold;
        height: 2.625rem;
    }
`;

除了将实际字符作为字符串插入外,您还可以使用CSS关键字 open-quote 和 close-quote .


const Foo = styled.p`
    font-weight: bold;

    &::before {
        content: open-quote;
        display: block;
        font-size: 4rem;
        font-weight: 700;
        height: 4.25rem;
    }
    &::after {
        content: close-quote;
        display: block;
        font-size: 4rem;
        font-weight: bold;
        height: 2.625rem;
    }
`;

Zharkov Ruslan 2 年前

你的可能有问题 content 属性,我更改了字段和样式中的值,这些值与&:之前,&:之后

const Foo = styled.p`
  &:before {
    content: "â";
    display: block;
    font-size: 4rem;
    font-weight: 700;
    height: 4.25rem;
  }

  &:after {
    content: "â";
    display: block;
    font-size: 4rem;
    font-weight: bold;
    height: 2.625rem;
  }

  font-weight: bold;
`;

GÊá´á´á´ÊCá´á´ 2 年前

来自此的硬编码方法 answer :

&:before {
    content: "â";
    display: block;
    font-size: 4rem;
    font-weight: 700;
    height: 4.25rem;
  }

  &:after {
    content: "â";
    display: block;
    font-size: 4rem;
    font-weight: bold;
    height: 2.625rem;
  }

作为一个临时解决方案,但不是所需的操作过程,因为我想知道为什么代码不被允许。

这个 answer 暗示

你需要转义引号。

const Foo = styled.p`
    font-weight: bold;

    &::before {
        content: "\\201C\";
        display: block;
        font-size: 4rem;
        font-weight: 700;
        height: 4.25rem;
    }
    &::after {
        content: "\\201D\";
        display: block;
        font-size: 4rem;
        font-weight: bold;
        height: 2.625rem;
    }
`;

是错误的。问题是转义反斜杠( \ ). 如果你转义引号,它就会出错。正如在其他问答中所提到的;因为首选的方法是也使用单引号。

解决代码问题的解决方案是终止反斜杠:

const Foo = styled.p`
    font-weight: bold;

    &::before {
        content: '\\201C';
        display: block;
        font-size: 4rem;
        font-weight: 700;
        height: 4.25rem;
    }
    &::after {
        content: '\\201D';
        display: block;
        font-size: 4rem;
        font-weight: bold;
        height: 2.625rem;
    }
`;

Kushal Dhakal 2 年前

我通常在使用伪元素时这样做:

父级上的“position:relative”。
子元素上的“position:absolute”。