如何在 React JSX 中使用 CSS 伪元素样式来传递变量？

Question

以下代码用于向卡片添加徽章。

CSS 工作代码：

.card::before {
  position: absolute;
  content: "";
  background: #283593;
  height: 18px;
  width: 18px;
  top: 2.5rem;
  right: -0.7rem;
  z-index: -1;
  transform: rotate(45deg);
}

.card::after {
  position: absolute;
  content: "Sample Name";
  top: 11px;
  right: -14px;
  padding: 0.5rem;
  width: 11rem;
  background: #3949ab;
  color: white;
  text-align: center;
  box-shadow: 4px 4px 15px rgba(26, 35, 126, 0.2);
}

我想在 CSS 样式中以 JSX 的形式传递变量，如下所示：

<div
  className="card"
  styleBefore={{
    position: "absolute",
    content: "",
    background: "#283593",
    height: "18px",
    width: "18px",
    top: "2.5rem",
    right: "-0.7rem",
    zIndex: "-1",
    transform: "rotate(45deg)",
  }}
  styleAfter={{
    position: "absolute",
    content: `- ${this.props.name}`,
    top: "11px",
    right: "-14px",
    padding: "0.5rem",
    width: `${this.props.name.length}rem`,
    background: "#3949ab",
    color: "white",
    textAlign: "center",
    boxShadow: "4px 4px 15px rgba(26, 35, 126, 0.2)",
  }}
>

而不是我上面使用的“styleBefore”和“styleAfter”（无效字段），如何在 JSX 中复制 css 的“.card::before”和“.card::after”？

Answer 1

您可以使用样式化组件或来自 mui/styles 的 makeStyles

Answer 2

您可以使用样式组件：

import React from 'react';
import styled from 'styled-components';

const Div = styled.div`
&::before{
  position: absolute;
  content: "";
  background: #283593;
  height: 18px;
  width: 18px;
  top: 2.5rem;
  right: -0.7rem;
  z-index: -1;
  transform: rotate(45deg);
}
&::after{
  position: absolute;
  content: "Sample Name";
  top: 11px;
  right: -14px;
  padding: 0.5rem;
  width: 11rem;
  background: #3949ab;
  color: white;
  text-align: center;
  box-shadow: 4px 4px 15px rgba(26, 35, 126, 0.2);
}
`;

class App extends React.Component {
.
.
.
render(){
   return(
          <Div></Div>
);
}
}

当然，您必须安装要求：

yarn add styled-components

有关样式组件的更多信息

告诉我，如果这对你有帮助:)