Pass className from Parent to child and call css property issue - material ui react

Question

I have a parent component as below

Parent

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

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

My button container is position fixed in the child however I want to override from the parent

Child:

const useStyles = makeStyles((theme) => ({
  root: {
    margin: '24px 16px',
  },
  mb1: {
    marginBottom: '13px',
  },
  buttonContainer: {
    position: 'fixed',
    bottom: theme.spacing(2),
    left: theme.spacing(2),
    right: theme.spacing(2),
  },
}));

  <form
      className={`${classes.root} ${props.className ? props.className : ''}`}
      <div className={classes.buttonContainer}>
        <Button
          fullWidth
          variant="contained"
          color="primary"
          size="large"
          type="submit"
          disabled={isEmptyValues(values.phone)}
        >
          {t('login_page.login_submit_get_code')}
        </Button>
      </div>
</form>

Want to apply position relative on the buttonContainer however it doesn't work

My question is this selector correct?

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

Update:

You should create a minimal reproducible example (preferably on [codesandbox](https://codesandbox.io/)) — hgb123, Sep 03 '20 at 13:24
Did you inspect the classes for child component, what it is showing? — Rohitha, Sep 03 '20 at 13:51
Just want to understand while inspecting, do you see loginForm class? — Rohitha, Sep 03 '20 at 14:23

score 1 · Answer 1 · answered Sep 03 '20 at 14:46

$ruleName refers to a rule with that name in the same style sheet (i.e. within the same makeStyles call). It won't match a rule that happens to have the same name in a different makeStyles call (the generated class names will be different).

There are a number of different ways to approach this problem. Below is one approach that keeps largely the same structure as your original code and passes the buttonContainer class in a separate, optional prop.

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

Pass className from Parent to child and call css property issue - material ui react

1 Answers1