Ways to replace CSS classes created using makeStyles

Question

Ways to replace CSS classes created using makeStyles

To clarify, my development environment is using MUI version 4.12.3. Inside file A, I have a simplified code snippet for a functional component, along with the usage of makeStyles to style a JSX element within the return statement (not displayed here). Everything functions correctly in this scenario.

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

Now, moving on to file B, the objective is to modify the CSS class content based on the value of isDesktop. Is it feasible or recommended to do so? Below is an attempt that didn't yield the expected outcome:

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

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

It's important to note that the primary goal in file B is to alter the CSS class content, without rendering the JSX component. The classes variable remains unused in this context as shown above.

javascript css reactjs material-ui makestyles

Answer 1

Answer №1

To achieve this functionality, we can utilize a limited number of hooks. Let's assume that the name of our functional component is "MyComponent" and our material component is called "MaterialComponent". The first step is to import the useWindowSize hook, which will allow us to determine the window size and distinguish between desktop and mobile screens. Within the makeStyles function, we create two classes for setting the minimum height for desktop and mobile views. By using a simple if-else statement, we conditionally apply these classes to the className prop of MaterialComponent. Below is the code snippet:

1. Define two classes using makeStyles

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

2. Import the useWindowSize hook

import useWindowSize from "hooks/useWindowSize";

3. Functional component code

const MyComponent = () => {
  const classes = useStyles();
  let myClass = "";
  const width = useWindowSize();
  const isDesktop = width >= 1024;
  const isMobile = width <= 600;
  
  if (isDesktop) {
    myClass = classes.contentDesktop;
  }
  if (isMobile) {
    myClass = classes.contentMobile;
  }
  
  return (
    <MaterialComponent className={`${myClass}`} />
  );
}

Answer 2

To achieve this functionality, we can utilize a limited number of hooks. Let's assume that the name of our functional component is "MyComponent" and our material component is called "MaterialComponent". The first step is to import the useWindowSize hook, which will allow us to determine the window size and distinguish between desktop and mobile screens. Within the makeStyles function, we create two classes for setting the minimum height for desktop and mobile views. By using a simple if-else statement, we conditionally apply these classes to the className prop of MaterialComponent. Below is the code snippet:

1. Define two classes using makeStyles

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

2. Import the useWindowSize hook

import useWindowSize from "hooks/useWindowSize";

3. Functional component code

const MyComponent = () => {
  const classes = useStyles();
  let myClass = "";
  const width = useWindowSize();
  const isDesktop = width >= 1024;
  const isMobile = width <= 600;
  
  if (isDesktop) {
    myClass = classes.contentDesktop;
  }
  if (isMobile) {
    myClass = classes.contentMobile;
  }
  
  return (
    <MaterialComponent className={`${myClass}`} />
  );
}

Answer 3

Answer №2

If you need to use this function outside of your functional component, you can easily export it.

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

Then, simply apply your customized styling wherever needed.

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

...
  <SomeOtherMuiComponent sx={customizeStyles(isDekstop)} />

Answer 4

If you need to use this function outside of your functional component, you can easily export it.

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

Then, simply apply your customized styling wherever needed.

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

...
  <SomeOtherMuiComponent sx={customizeStyles(isDekstop)} />

Ways to replace CSS classes created using makeStyles

Answer №1

Answer №2

Similar questions

What is the best way to create a React text box that exclusively accepts numeric values or remains empty, and automatically displays the number keypad on mobile devices?

I am attempting to store the primary array in local storage, but unfortunately, the value is not being saved within the React context API

A guide on implementing arrow links in D3.js

Guidelines for utilizing basepath for specific pages in NextJS

MUI: The color utility previously known as 'fade' has been updated to 'alpha' in order to more accurately reflect its purpose within material-table

After performing an action with Redux, the error message ""Cannot access properties of 'undefined'" is displayed

Executing a jQuery script on various elements of identical types containing different content (sizes)

Arrangement using the display property of inline-block not following a linear direction

Error code -4058 ENOENT indicates that the file or directory does not exist. This issue is usually caused when npm is unable to locate a specific file

Is my data secure in Node.js RAM?

What's the best way to update the state with each click?

Adding a vertical menu in PHP is a great way to enhance the

Chrome and FireFox Encounter Ajax Functionality Issues

What does the term "progressive framework" refer to?

Sending a request to a JSON file using Ajax

What's the best way to refactor the `await nextEvent(element, 'mousemove')` pattern in my code once it is no longer necessary?

The method to extract the followers of an Instagram account using node.js, cheerio, and InstAuto/Puppeteer

ReactJS: Communicating changes in Child component state to Parent component state

Menu options moved to the right of the screen

Having trouble with updating links in HTML pages?