如何使用 makeStyles 将 prop 作为类名传递

Posted 2023-02-23

【中文标题】如何使用 makeStyles 将 prop 作为类名传递

【英文标题】：How to pass prop as a className using makeStyles

【发布时间】：2021-09-18 21:23:06

【问题描述】：

起初我是新手。我正在尝试使用反应制作网站。我有一个功能组件，其中包含 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  />
      </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,
    ,
  ,


));

【问题讨论】：

尝试用classes[pseudoClass]替换classes.pseudoClass

【参考方案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);

【讨论】：

这里您正在导出一个样式化的组件。我需要从 about 组件中获取 psudoClass 属性，并将 TwoColBigTxt 组件中的值用作类名。这里的 pseudoClass 应该与 className=classes.pseudoClass 一起出现，其中 pseudoClass 是“左”或“右”