Reactjs 将类名从父级传递给子级，并调用css属性issue-material ui react

我有一个父组件，如下所示

家长

  loginForm: {
    margin: 0,
    '& $buttonContainer': {
      position: 'relative',
      marginTop: '195px',
    },
  },

       <div className={classes.login}>
          <LoginForm className={classes.loginForm} />
        </div>

更新：

---

$ruleName

指在相同样式表中具有该名称的规则（即在相同的

makeStyles

调用中）。它将不匹配在不同的

makeStyles

调用中具有相同名称的规则（生成的类名将不同）

有许多不同的方法来解决这个问题。下面是一种方法，它保持了与原始代码基本相同的结构，并将

buttonContainer

类作为单独的可选属性传递

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import clsx from "clsx";

const useParentStyles = makeStyles((theme) => ({
  loginForm: {
    margin: 0,
    "& $buttonContainer": {
      position: "relative",
      marginTop: "195px"
    }
  },
  buttonContainer: {}
}));
const LoginFormParent = () => {
  const classes = useParentStyles();
  return (
    <LoginForm
      className={classes.loginForm}
      buttonContainerClassName={classes.buttonContainer}
    />
  );
};

const useChildStyles = makeStyles((theme) => ({
  root: {
    margin: "24px 16px"
  },
  buttonContainer: {
    position: "fixed",
    bottom: theme.spacing(2),
    left: theme.spacing(2),
    right: theme.spacing(2)
  }
}));

const LoginForm = (props) => {
  const classes = useChildStyles();
  return (
    <form className={clsx(classes.root, props.className)}>
      <div
        className={clsx(
          classes.buttonContainer,
          props.buttonContainerClassName
        )}
      >
        <Button
          fullWidth
          variant="contained"
          color="primary"
          size="large"
          type="submit"
        >
          Login
        </Button>
      </div>
    </form>
  );
};
export default function App() {
  return <LoginFormParent />;
}

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@物料界面/核心/按钮”导入按钮；
从“clsx”导入clsx；
const useParentStyles=makeStyles（（主题）=>({
登录信息：{
保证金：0，
“&$buttonContainer”：{
职位：“相对”，
玛金托普：“195px”
}
},
按钮容器：{}
}));
const LoginFormParent=（）=>{
常量类=useParentStyles（）；
返回(
);
};
const useChildStyles=makeStyles（（主题）=>({
根目录：{
保证金：“24px 16px”
},
按钮容器：{
位置：“固定”，
底部：主题。间距（2），
左：主题。间距（2），
右：主题。间距（2）
}
}));
const LoginForm=（道具）=>{
const classes=useChildStyles（）；
返回(
登录
);
};
导出默认函数App（）{
返回；
}

有关答案:

---

您在这方面有什么问题？@ShubhamVerma更新了问题您应该创建一个最小的可复制示例（最好是在上）。您是否检查了子组件的类，它显示了什么？@Rohitha我的问题是，有没有一种方法可以从parentAh yep处访问，这一直是一个选项，希望检查是否有其他可能：）

'& $buttonContainer': {
      position: 'relative',
      marginTop: '195px',
    },

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import clsx from "clsx";

const useParentStyles = makeStyles((theme) => ({
  loginForm: {
    margin: 0,
    "& $buttonContainer": {
      position: "relative",
      marginTop: "195px"
    }
  },
  buttonContainer: {}
}));
const LoginFormParent = () => {
  const classes = useParentStyles();
  return (
    <LoginForm
      className={classes.loginForm}
      buttonContainerClassName={classes.buttonContainer}
    />
  );
};

const useChildStyles = makeStyles((theme) => ({
  root: {
    margin: "24px 16px"
  },
  buttonContainer: {
    position: "fixed",
    bottom: theme.spacing(2),
    left: theme.spacing(2),
    right: theme.spacing(2)
  }
}));

const LoginForm = (props) => {
  const classes = useChildStyles();
  return (
    <form className={clsx(classes.root, props.className)}>
      <div
        className={clsx(
          classes.buttonContainer,
          props.buttonContainerClassName
        )}
      >
        <Button
          fullWidth
          variant="contained"
          color="primary"
          size="large"
          type="submit"
        >
          Login
        </Button>
      </div>
    </form>
  );
};
export default function App() {
  return <LoginFormParent />;
}