score:1

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

Related Query

More Query from same tag