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

Exploring nested components traversal in React

Alert for JavaScript Increment (++) Operation

Efficiently Filtering User Input and Other Things

Tips for transforming a scroll element into the viewport using Angular 2+

Automating the process of running npm start on page load: A guide

The concept of nested views in Angular UI-Router allows for a

Ways to append multiple values to an object ID in mongoDB at a later time

Unable to locate item by its identification number

Using javascript, hide or show a div without using jquery or the display:none property

Extracting values from URL query parameters in Vue.js

Implementing Knockout.js with JqueryUI Autocomplete: Access the complete object instead of just the value

Using useState in ReactJS does not allow setting state data

Tips for retrieving a child component's content children in Angular 2

What could be causing the misalignment of the Datepicker calendar in Material UI?

VueJS does not refresh other components in the application

What is the proper way to construct a URL with filter parameters in the RTK Query framework?

Dealing with an endless loop caused by a promise in AngularJS's ui router $stateChangeStart event

The specified selector is invalid or illegal in HTMLUnit

Create an HTML and CSS code that allows you to split paragraph text into columns within a

Issue with React Ref: Invariant Violation when trying to addComponentAsRefTo