2

起初我是新来的反应。我正在尝试使用反应制作网站。我有一个功能组件，其中包含 6 个列网格中的图像和文本内容。我需要在需要的地方交换六列。我有 2 个左右类，其中一个有“::after”，另一个有“::before”伪元素。我正在使用材料 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,
    },
  },


}));
4

1 回答 1

0

尝试这个：

import React from 'react'
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  cell: {
    padding: '1em'
  }
});
const Cmp = ({ classes }) => (
  <SubCmp className={classes.cell}>
    <div>Some text</div>
  </SubCmp>
)

export default withStyles(styles)(Cmp);
于 2021-07-08T12:30:11.133 回答