第一个伪类在样式组件中不起作用答案

【问题标题】：first pseudo class won't work in style components第一个伪类在样式组件中不起作用
【发布时间】：2021-05-02 07:30:34
【问题描述】：

styled.q 中的第一个伪类不起作用。它不会出现在屏幕上。如果我复制并粘贴它以便首先列出 ::before 它不起作用。如果我第二次列出第一个伪类，它会起作用。

const ResearchingRyan = styled.div`
  height: 100vw;
  width: 100vw;
  background-image:url(${phonePic});
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;
  display:flex;
  flex-direction:column;
  justify-content: flex-end;
  align-items: center;
  @media screen and (min-width: 525px) {
    background-image:url(${tabletPic});
    height: 500px;
    width: 500px;
  }
  @media screen and (min-width: 1100px) {
    background-image:url(${desktopPic});
    height: 500px;
    width: 500px;
  }
  `
  const QuoteP = styled.p `
    background-color:${dark};
    color:${bgAlt};
    padding:1rem
  `
  const QuoteQ=styled.q`
    quotes: "\201C", "\201D";
    &::after {
      content: close-quote;
      font-weight: bold;
      font-size: 36px;
      color:${bgAlt};
    }
    &::before {
      content: open-quote;
      font-weight: bold;
      font-size: 36px;
      color:${bgAlt};
    }
   `;

【问题讨论】：

标签： styled-components pseudo-element

【解决方案1】：

在“QuoteQ”组件中，您需要更正“quotes”属性。你写的是正确的，但有时在样式组件中遇到特别是在某些属性中使用 unicode，例如“引号”。

因此，样式不会应用于伪元素。因为样式处理在引号属性处停止。更正引号，一切都会正常。

下面表示具有正确“引号”属性的代码。并使用此代码链接到带有演示的代码框。

https://codesandbox.io/s/styled-components-forked-1r1qc5

还链接到 github 问题与类似问题。

https://github.com/styled-components/styled-components/issues/3413

const QuoteQ = styled.q`
    quotes: "\\201c" "\\201d";

    &::after {
      content: close-quote;
      font-weight: bold;
      font-size: 36px;
      color: blue;
    }

    &::before {
      content: open-quote;
      font-weight: bold;
      font-size: 36px;
      color: red;
    }
`;

【讨论】：