下面的代码用于将徽章添加到卡片。
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)",
}}
>
我如何在JSX中复制css的“.card::before”和“.card::after”,而不是我上面使用的“styleBefore”和“styleAfter”(无效字段)?
2条答案
按热度按时间9njqaruj1#
您可以使用mui/styles中的样式化组件或makeStyles
vuktfyat2#
您可以使用from styled-components:
当然,你必须安装的要求:
关于styled-components的更多信息