Is there a distinct purpose for each? At what point is it more suitable to utilize withStyles instead of makeStyles?
Is there a distinct purpose for each? At what point is it more suitable to utilize withStyles instead of makeStyles?
UPDATE This post focuses on version 4 of Material-UI, with additional information and links for version 5.
The Hook API (makeStyles/useStyles) is specifically designed for function components.
The Higher-order component API (withStyles) can be used with both class components and function components.
Both APIs offer the same functionality, with no difference in the styles parameter between withStyles and makeStyles.
If you are working with a function component, it is recommended to use the Hook API (makeStyles). Additionally, there is slightly more overhead with withStyles compared to makeStyles (as it internally uses makeStyles).
When customizing the styles of a Material-UI component, using withStyles is preferred over creating your own component just for calling makeStyles/useStyles, as this would essentially duplicate the functionality of withStyles.
An example of wrapping a Material-UI component can be seen below (from How to style Material-UI's tooltip?):
const BlueOnGreenTooltip = withStyles({
tooltip: {
color: "lightblue",
backgroundColor: "green"
}
})(Tooltip);
https://codesandbox.io/s/tooltip-customization-9fle8?fontsize=14&hidenavigation=1&theme=dark
With version 5 of Material-UI, styled replaces both withStyles and makeStyles. Check out examples for v5 in How to style Material-UI's tooltip?. More discussion on v5 styling options can also be found in Using conditional styles in Material-UI with styled vs JSS.
Is there a preferred scenario for using withStyles over makeStyles?
In most cases, it is recommended not to use withStyles, however, there are some specific instances where it may be necessary:
I'm facing a challenge in dynamically adding data from an SQL Table to HTML. Here is my loop: @foreach (var item in Model.ModulesSubStages) { <div class="row"> <div class="col-md-6"><a id="courseRed ...
Greetings everyone, it's been a while since I dabbled in web development. I recently worked on my site with the intention of making it responsive using flexbox. This is my first time posting here, so please guide me on how to seek help more effective ...
My React App with Autocomplete feature is almost complete, but I need some assistance to double-check my code. https://i.stack.imgur.com/dhmck.png In the code snippet below, I have added a search box with the className "autocomplete" style. The issue I a ...
I'm currently working on a basic webpage and encountering an issue with setting an image as the background for my header section. Despite using what I believe to be the correct code in the CSS section, specifying the right path and file name for the i ...
Within my current project, I have implemented validation features for text boxes. When a user clicks on a text box, the border is highlighted. If they click elsewhere without entering any value, the border turns red and an alert pop-up appears. In additio ...
I am facing an issue with aligning 2 divs on the same line, separated by a vertical line while ensuring that the line always has the height of the parent div. Despite trying various solutions suggested online, none seem to work for me. I cannot use positi ...
I'm currently developing in React and facing a challenge where I need to trigger a fade animation for an element only when it becomes visible on the screen. The issue is that right now, the animation plays as soon as the page loads, which defeats the ...
Can anyone help me figure out how to use the jquery .css() function without overwriting existing values, but instead adding additional values to css properties? For example, I have an element that currently has the css transform:translate(-50%, -50%). I w ...
Currently, I am in the process of testing a component that dynamically renders another wrapped component based on certain conditions. My testing tools include enzyme and jest, with the root component being rendered using the shallow() method. The main chal ...
Here's an illustration of the desired result: codepen.io/j0be/pen/jWGVvV How can I implement this HTML and JS in Next.js? I am looking to customize this code using TypeScript and SCSS in Next.js. However, I am unsure about how to convert the HTML an ...
I'm currently dealing with a container div styled with background-color: red;. This container has around 12 children, and the last child is set with background-color: blue;. My goal was to position the container on top of the child with the blue backg ...
Currently, I am attempting to implement a dynamic <li> view limit within the content of a div. My goal is to display only 3 <li> elements each time the div content is scrolled. Although not confirmed, I believe this example may be helpful: ...
Hi there, I am facing an issue with the discussion app where I am only able to render either the header or the post at a given time. I am struggling with how to render in thread.jsx. This app is built using React and Firebase. Can anyone suggest how to res ...
I'm currently working on a website that can be found at this temporary link: The main banner of the site features a background image with fading text, which looks great on standard desktop screens. However, when viewed on wider screens like 1600x1200 ...
I've been attempting to create a component variant in Google Optimize beyond just text or color changes, but I haven't found a suitable method to do so yet. I'm looking for guidance on how to integrate/configure Optimize with my code in orde ...
I am working with a table structure like this: <table> <tr><td class="momdad"><i class='glyphicon glyphicon-cog'></i> Hello </td><td> Mom </td></tr> <tr><td class="momdad">< ...
I've been attempting to set the image as a background-image from the public folder using styled-components. I've tried the following: import styled from "styled-components"; import Background from 'process.env.PUBLIC_URL + /images/ ...
When attempting to drag and drop three images into a droppable div, I encountered an issue where the images were not perfectly positioned within the div. This problem seemed to be related to the positioning of the droppable div itself. Specifically, when s ...
Looking for suggestions on achieving the following layout without using CSS grid, either with Bootstrap or IE compatible CSS grid. On large screens: Head and body stack on the left, with an image on the right covering the height of both. [&mdash ...
I'm in the process of developing a dynamic select button that adjusts based on the information entered into the iterative input fields I've set up. These input fields all utilize the same onChange() function. for (let i = 0; i < selectCount; i ...