Блог

Сначала я новичок в том, чтобы реагировать. Я пытаюсь создать веб — сайт с помощью react. У меня есть функциональный компонент с изображением и текстовым содержимым, которые расположены в сетках из 6 столбцов. Мне нужно поменять местами шесть столбцов там, где мне нужно. У меня есть 2 класса справа и слева, в которых у одного есть «::после», а у другого есть «::до» псевдоэлементы. Я использую стили оформления пользовательского интерфейса material для определения своего 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: {
    "amp;:after": {
      content: `""`,
      position: "absolute",
      top: "-4%",
      right: "24%",
      width: "60%",
      height: "100%",
      background: "#bc3d3c85",
      zIndex: -1,
    },
  },
  left: {
    "amp;:before": {
      content: `""`,
      position: "absolute",
      bottom: "-3%",
      left: "-5%",
      width: "60%",
      height: "100%",
      background: "#bc3d3c85",
      zIndex: -1,
    },
  },


}));
 

Попробуйте это:

 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);