下面的代碼用于向卡片添加徽章。

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)",
  }}
>

而不是& quot之前樣式& quot和& quot樣式之后& quot(無效字段)我如何才能復制& quot。卡::之前& quot和& quot。卡::在& quotJSX的css嗎？

您可以使用mui/styles中的樣式組件或makeStyles

您可以使用樣式化組件:

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

關于樣式組件的更多信息