反应本机-伪元素等效

Question

我想创建一个顶部带有条纹的按钮，看起来像在按钮后面（下图）。

我已经使用:: after伪类在纯CSS中解决了此问题。但是我不确定如何在React中做到这一点。任何建议或帮助都适用。

Answer 1

有一种方法是使用迷人的div。

const IconDiamond = glamorous.div(
  {
    width: 0,
    height: 0,
    border: '50px solid transparent',
    borderBottomColor: 'red',
    position: 'relative',
    top: '-50px',
    '&::after': {
      content: `''`,
      position: 'absolute',
      left: '-50px',
      top: '50px',
      width: '0',
      height: '0',
      border: '50px solid transparent',
      borderTopColor: 'red',
    }
  },
)

请注意：

• CSS 属性必须是驼峰式的，符合 React https://facebook.github.io/react/docs/dom-elements.html#style

• 使用 content 属性时，您需要确保传递的字符串中包含引号，即 content: ''`

• before 和 after 伪元素的语法为 '&::before': { & '&::after': { https://github.com/paypal/glamorous#example-style-objects

检查此以获取更多信息：https ://github.com/paypal/glamorous/issues/223

要了解有关 Glamorous div 的更多信息，请访问 https://glamorous.rocks/basics