Question

起初我是新手。我正在尝试使用 react 制作网站。我有一个带有图像和文本内容的功能组件，它们位于 6 列网格中。我需要在需要的地方交换六列。我有左右两个类，其中一个有“::after”，另一个有“::before”伪元素。我正在使用 material ui makestyles 来定义我的 css。我需要将父组件的类名传递给子组件并将其用作类的名称。

子组件：

import React from "react";
import { Grid, Typography } from "@material-ui/core";
import useStyles from "./TwoColBigTxtStyles";

const TwoColBigTxt = ({ sectionImage, pseudoClass }) => {
  const classes = useStyles();
  return (
    <Grid container className={classes.container}>
      <Grid item xs={12} md={8} className={classes.txtContainer}>
        <Typography variant="h4">
          Ad do ut ut non eiusmod dolore cillum minim.
        </Typography>
        <Typography variant="body2">
          Irure id adipisicing nulla reprehenderit Lorem eu commodo. Anim non
          deserunt magna pariatur id. Non ipsum aliqua aute irure. Ad velit
          occaecat in eu excepteur aliqua consequat exercitation. Sit cupidatat
          irure officia magna ullamco. Sunt reprehenderit duis nulla consequat
          sunt consectetur magna. Voluptate ut id adipisicing cillum proident
          proident labore sunt elit cupidatat ullamco enim.
        </Typography>
      </Grid>
      <Grid
        item
        xs={12}
        md={4}
        className={`${classes.imgContainer} ${classes.{pseudoClass}}`}
      >
        <img src={sectionImage} alt="About us" />
      </Grid>
    </Grid>
  );
};

父组件：

import React from "react";
import TwoColumnImageTxt from "../Components/TwoColumnTxtImg/TwoColumnImageTxt";
import TwoColBigTxt from "../Components/TwoColBigTxt/TwoColBigTxt";
import { Container } from "@material-ui/core";

const About = () => {
  return (
    // <TwoColumnImgTxtStyles
    //   heroTitle="Redefining the way you travel"
    //   heroDesc="Sunt ad amet quis excepteur laboris occaecat nulla et consequat et elit. Laboris fugiat veniam mollit cupidatat nulla aliqua do in consectetur commodo et est reprehenderit. Nulla tempor culpa commodo eu qui. Anim est enim ea minim eu consequat cupidatat est eu. Ut do magna ipsum proident occaecat ea fugiat deserunt ex consequat nisi. Nulla eu Lorem velit voluptate fugiat. Qui deserunt esse officia officia magna pariatur culpa."
    // />
    <>
      <Container>
        <TwoColBigTxt pseudoClass="left" sectionImage="https://image.freepik.com/free-photo/empty-wooden-dock-lake-during-breathtaking-sunset-cool-background_181624-27469.jpg" />
        <TwoColBigTxt pseudoClass="right" sectionImage="https://image.freepik.com/free-photo/empty-wooden-dock-lake-during-breathtaking-sunset-cool-background_181624-27469.jpg" />
      </Container>
    </>
  );
};

export default About;

CSS

import { makeStyles } from "@material-ui/core/styles";

export default makeStyles((theme) => ({

  right: {
    "&:after": {
      content: `""`,
      position: "absolute",
      top: "-4%",
      right: "24%",
      width: "60%",
      height: "100%",
      background: "#bc3d3c85",
      zIndex: -1,
    },
  },
  left: {
    "&:before": {
      content: `""`,
      position: "absolute",
      bottom: "-3%",
      left: "-5%",
      width: "60%",
      height: "100%",
      background: "#bc3d3c85",
      zIndex: -1,
    },
  },


}));

如何使用 makeStyles 将 prop 作为 className 传递

0 个答案: