1

Note, I'm using MUI 4.12.3. In file A I have this (simplified) besides a functional component. Inside the functional component's return statement I also apply it to a JSX element (not shown). This works well.

const useStyles = makeStyles((t) => ({
  content: {
    minHeight: '100vh',
  },
}));

In file B, I would like to override the CSS class content based on isDesktop. Is this possible/desirable? Something like this, but it does not work:

const useStyles = makeStyles({
content: {
    minHeight: (props) => (props.isDesktop ? '100vh' : '112vh'),
  },
});

//And inside my functional component:
const isDesktop = useMediaQuery(Theme.breakpoints.up('sm'));
const classes = useStyles({ isDesktop });

Note that the intent is to not render the JSX component in file B, only to override the CSS class content in file B is desirable. (classes is unused in my sample.)

saner
  • 399
  • 4
  • 13
  • Please consider not using `makeStyles`. @mui/styles is the legacy styling solution for MUI. It is deprecated in v5. It depends on JSS as a styling solution, which is not used in the @mui/material anymore [documentation](https://mui.com/system/styles/basics/). – sm3sher Jul 13 '22 at 14:31
  • @sm3sher Thanks, I know there's a newer version and we'll be upgrading, but at the moment I'm stuck with v4. – saner Jul 13 '22 at 14:35
  • 1
    I know how to do it with newer styling approaches. If `makeStyle` is outside your component I don't believe it is possible to pass in a custom prop. – sm3sher Jul 13 '22 at 14:39
  • Thanks, but I believe I saw a working example in our code with passing a custom prop to makeStyles, while makeStyles is outside the component... With newer approaches, meaning MUI v5? – saner Jul 13 '22 at 14:47
  • I mean the `sx` prop, is it useable in MUI v4 for you? – sm3sher Jul 13 '22 at 14:49
  • `sx` could technically be used, sure… Please note that as I added in my last sentence in the question: I don't intend to render the component in file B, only modify its CSS class `content`. Would this scenario work with `sx`? – saner Jul 13 '22 at 14:57
  • 1
    Yes it would work with `sx`, I can provide an answer – sm3sher Jul 13 '22 at 15:23
  • Great, it would be interesting to see, @sm3sher. – saner Jul 13 '22 at 15:42

2 Answers2

0

This can be done with few hooks.Let say my functional componet name is "Mycomponent".my material component is "materialcomponent".we need to import useWindowSize hook.That helps us to get the window size.so that we can check our screen size is desktop or mobile.in the makestyle we have to create two classes for desktop and mobile minHeight.with the simple if else checking we can pass this two classes conditionally to materialcomponent className prop.Below is the code.

1.create two classes with the makestyles

const useStyles = makeStyles((t) => ({
  contentDesktop: {
    minHeight: '100vh',
  },
contentMobile:{
 minHeight: '110vh',
}

}));

2.import the useWindowSize hook

import useWindowSize from "hooks/useWindowSize";

3.functinal componet code.

const Mycomponent = () => {

  const classes = useStyles();
  let myclass="";
  const width = useWindowSize();
  const isDesktop = width >=1024;
  const mobile= width <= 600;

if(isDesktop){

myclass=classes. contentDesktop;

}
if(mobile){
myclass=classes.contentMobile;
}


return (
 
<materialcomponent className={`${myclass}`}

);


}
Lakruwan Pathirage
  • 625
  • 3
  • 14
0

You can export this function outside of your functional component

export const getStyles = (isDesktop) => {
  return {
    content: {
      minHeight: isDesktop ? "100vh" : "112vh",
    },
  };
};

And then wherever you want your styling applied

const isDesktop = useMediaQuery(Theme.breakpoints.up('sm'));

...
  <SomeMuiComponent sx={getStyles(isDekstop)} />
sm3sher
  • 2,764
  • 1
  • 11
  • 23
  • Should ` ` go in file A or B? I do not intend to render SomeMuiComponent in file B… it is already rendered in file A. – saner Jul 13 '22 at 16:22
  • You can render `` in whatever file you need since `getStyles()` is being exported and it can be imported from anywhere in your code. – sm3sher Jul 18 '22 at 17:52