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

yh2wf1be 于 2023-05-28 发布在 React

关注(0)|答案(2)|浏览(152)

下面的代码用于将徽章添加到卡片。
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”（无效字段）？

reactjs

来源：https://stackoverflow.com/questions/70432122/how-can-i-use-css-pseudo-elements-styling-inside-react-jsx-to-pass-variables

2条答案

按热度按时间

9njqaruj1#

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

赞(0）回复(0）举报 2023-05-28

vuktfyat2#

您可以使用from styled-components：

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的更多信息

赞(0）回复(0）举报 2023-05-28

我来回答

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

2条答案

相关问题

热门标签

最新问答