How to pass prop as a className using makeStyles

Question

At first I am new to react. I am trying to make a website using react. I have a functional component with an image and a text content which are in 6 column grids. I need to swap the six columns wherever i needs. I have 2 classes right and left in which one have "::after" and another have "::before" pseudo elements. I am using material ui makestyles to define my css. I need to pass the classname from parent component to child and use it as the name of the class.

Child component:

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

parent component:

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,
    },
  },


}));

Try replacing `classes.{pseudoClass}` with `classes[pseudoClass]` — Daniel, Jul 08 '21 at 19:05

score 0 · Answer 1 · answered Jul 08 '21 at 12:30

0

Try this:

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

answered Jul 08 '21 at 12:30

Xabi

95
8

here you are exporting a styled component. I need to get the psudoClass prop from the about component and use the value in the TwoColBigTxt component as a classname. Here the pseudoClass should come along with className={classes.pseudoClass} where pseudoClass is either "left" or "right" – Jane Doe Jul 08 '21 at 14:02

How to pass prop as a className using makeStyles

1 Answers1