reactjs - React native - 等效的伪元素

Question

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



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

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
了解更多关于魅力四射的div https://glamorous.rocks/basics