React Emotion 是否支持 ::before/ ::after 选择器？答案

【问题标题】：Does React Emotion support ::before/ ::after selectors?React Emotion 是否支持 ::before/ ::after 选择器？
【发布时间】：2020-11-07 10:34:21
【问题描述】：

我正在尝试使用React Emotion 设置一条中间有文字的水平线。它看起来像这样：

----------------------SOME TEXT----------------------------------

我在 StackOverflow 上找到了有关如何使用 CSS 执行此操作的示例，但它对我不起作用。

这是我正在使用的 DIV，但它不起作用。

这可以用 react Emotion 设置吗？我错过了什么？

<div
  css={{
    display: 'flex',
    lineHeight:'1em',
    color:'gray',
    '&:before, &:after': {
        content:'',
        display:'inline-block',
        flexGrow:'1px',
        marginTop:'0.5em',
        backgroundColor:'gray',
        height:'1px',
        marginRight:'10px',
        marginLeft:'10px'
    }
   
  }}
>
  SOME TEXT
</div>

【问题讨论】：

标签： reactjs emotion

【解决方案1】：

对于为css 函数传递的字符串插值，您可以像这样使用它

let highlight = css`
  border: 1px solid grey;
  &:after {
      position: absolute;
}`;

【讨论】：

【解决方案2】：

您需要在css函数中从emotion/css或emotion/react中传递样式对象。

您忘记将样式化对象包装在情感函数中。

如果你使用的是对象而不是字符串，则将内容用双引号括起来

  // First way, use css from @emotion/css, pass as object

  import { css } from '@emotion/css'

  <div
    className={css({
      display: 'flex',
      lineHeight: '1em',
      color: 'gray',
      ':before, :after': {
          content: '""',
          flexGrow: '1',
          marginTop: '0.5em',
          backgroundColor: 'gray',
          height: '1px',
          marginRight: '10px',
          marginLeft: '10px'
      } 
    })}
  >
    SOME TEXT
  </div>

  // Second way, use css from @emotion/css, pass as string

  import { css } from '@emotion/css'

  <div
    className={css`
      display: flex;
      line-height: 1em;
      color: gray;
      :before, :after: {
          content: '';
          flex-grow: 1;
          margin-top: 0.5em;
          background-color: gray;
          height: 1px;
          margin-right: 10px;
          margin-left: 10px;
      } 
    `}
  >
    SOME TEXT
  </div>

  // Third way, use css from @emotion/react

  import { css } from '@emotion/react'

  <div
    css={css`
      display: flex;
      line-height: 1em;
      color: gray;
      :before, :after: {
          content: '';
          flex-grow: 1;
          margin-top: 0.5em;
          background-color: gray;
          height: 1px;
          margin-right: 10px;
          margin-left: 10px;
      } 
    `}
  >
    SOME TEXT
  </div>

【讨论】：

【解决方案3】：

您的代码在 ::before 和 ::after 语法上是正确的，但是，在尝试复制时，我发现了两个错误：

flexGrow 不应该有 px 单位，只有 1：flexGrow:'1
内容应该有双引号content:'""'

<div
    css={{
      display: 'flex',
      lineHeight:'1em',
      color:'gray',
      '&:before, &:after': {
          content:'""',
          display:'inline-block',
          flexGrow:'1',
          marginTop:'0.5em',
          backgroundColor:'gray',
          height:'1px',
          marginRight:'10px',
          marginLeft:'10px'
      }
    }}
  >

【讨论】：