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

Posted 2023-02-21

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

【英文标题】：How can I use CSS Pseudo-elements styling inside React JSX to pass variables?

【发布时间】：2022-01-22 16:17:10

【问题描述】：

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

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.lengthrem`,
    background: "#3949ab",
    color: "white",
    textAlign: "center",
    boxShadow: "4px 4px 15px rgba(26, 35, 126, 0.2)",
  
>

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

【参考方案1】：

您可以使用样式组件：

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: $props => props.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 name=""></Div>
);

当然，你必须安装要求：

yarn add styled-components

更多关于styled-components的信息

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

【讨论】：

是的，我可以添加自定义 CSS，但在其中传递变量，例如：''' 内容：- $this.props.name，''' 没有得到反映。我不想硬编码一个值，例如：``` content: "Sample Name"; ``` 我想传递一个变量。我怎样才能做到这一点。

@DhimanGhosh。好的 :) 我现在编辑了我的答案： content: $props => props.name;现在可以用了吗？

【参考方案2】：

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

【讨论】：

这似乎更像是评论而不是答案。一些细节是有保证的。