The problem of undefined icons in Material UI's Stepper StepLabel

Having some trouble incorporating a custom Step Label Icon within the nodes of the Stepper Component provided by Material UI. I want to add an icon to each circle, similar to what is shown in this Material UI demo: https://i.sstatic.net/WLOcS.png

However, I keep encountering an error: https://i.sstatic.net/GvpEK.png

Below is my code. Appreciate any help!

import React from 'react';
import { Typography } from '@material-ui/core';
import { withStyles, styles } from '@material-ui/core/styles';

// Code continues...

I'm getting an undefined styled component error. Any suggestions on how to resolve this?

javascriptcssreactjsbootstrap-4material-ui

Answer №1

The styled() function is specific to version 5 of the framework. To access it, you must either upgrade to MUI v5 by following this installation guide or stick with the older API available in v4 (which uses withStyles):

V5

import { styled } from '@mui/material/styles';

const StyledComponent = styled(Component)({
  // your styles
});

V4

import { withStyles, styles } from '@material-ui/core/styles';

const StyledComponent = withStyles({
  // your styles
})(Component);

You can refer to the v4 documentation here, and the v5 documentation here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Randomly order the vertices and incident polygons for three.js fill color on a face

Recently, I delved into learning three.js and am eager to figure out how to fill in the face color after creating a polygon based on randomly given vertices. Can anyone guide me on how to achieve this? var scene = new THREE.Scene(); var camera = new THREE. ...

javascriptthree.js3dpolygonvertex

Screen readers are unable to "read" text that is identified through aria-describedby

When enhancing my web application for accessibility, I encountered a challenge. I have implemented two required fields in a form that should display separate error messages as spans. To accomplish this, I am utilizing aria-invalid to signal when the fields ...

javascripthtmlaccessibility

What is the best way to execute an inline function two times in a row

I'm currently utilizing Gametime.js to create a real-time world chat feature. All messages are kept in a database for storage. Interestingly, PubNub, which is used by Gametime.js, seems to require messages to be sent twice for them to actually go th ...

javascriptfunctionloopspubnub

Navigating to a particular page in ReactJS using a unique JSON identifier

I need to navigate to a particular page and display a specific JSON Object. If the JSON Object contains ID: 1, then it should redirect to localhost:300/users/1 and display the data of ID 1. I have also linked another JSON file that contains user addresses, ...

jsonreactjs

Upon loading the page, include a class to a specific element within an AngularJS ng-repeat function by evaluating the content of a JSON object

I have a group of buttons that are generated from a json object. Whenever a user clicks on a button, it changes color (referred to as the selected color) using the ng-class directive with bootstrap classes. If the same button is clicked again, it reverts b ...

javascriptangularjs

Can the transition of the Chakra UI Menu component be customized?

Is it feasible to modify the transition of Chakra's Menu component List element using custom CSS or Chakra's built-in transitions? See more information at here ...

reactjschakra-ui

employing express.json() post raw-body

Within my Express application, I am aiming to validate the length of the request body and restrict it irrespective of the content type. Additionally, I wish to parse the body only if the content type is JSON. How can I go about accomplishing this? Curren ...

javascriptnode.jsjsonexpress

Tips for emphasizing the letters of the alphabet used in search functionality with Angular

Is there a way to highlight specific alphabets in the searched list instead of highlighting the entire word? Currently, when filtering the memberOffice and memberFacilities lists based on the alphabet entered in the search field, the entire text is highlig ...

javascripthtmlcssangular

The CSRF token is mysteriously altering in places it should remain unchanged

Implementing the code below to prevent CSRF vulnerability if (!isset($_POST['_token'])) { $_SESSION['_token'] = bin2hex(random_bytes(20)); } I then use the token in hidden inputs named _token. In my main.js file, I include the foll ...

javascriptphpajax

Why does Internet Explorer display .png images in lower quality compared to other browsers?

My menu displays a .png file with smooth edges in most browsers, but in Internet Explorer it appears with rough edges. Can someone help me understand why IE treats .png files differently compared to other browsers? <li> <a href="" onclick=" ...

htmlcssinternet-explorer

Is it possible to Use Vuejs 2 to Update MathJax dynamically?

Just figured out how to resolve this issue. Simply bind the data using v-html <div id="app"> <h1 v-html="equation"></h1> <button @click='change'>Change</button> </div> var vm ...

javascriptvue.jsvuejs2mathjax

Creating a personalized confirmation function using JavaScript

Here is a function I've created to generate a confirmation box. The issue I'm facing is that the function doesn't wait for the user to click before returning true/false based on the onclick events. So, how can I solve this? function Confi ...

javascriptweb-applicationsfrontendweb-frontendconfirm

The Javascript style.opacity function eliminates the leading zero from the input string

In my application, users have the ability to change the color of the background but not the pattern. They can adjust the background behind the pattern and the opacity of the pattern. Users are prompted to input a percentage, which is actually a number betw ...

javascripthtmlcss

After converting my HTML elements to JSX in Next.js, I am experiencing issues with my CSS files not being applied

Hey there, I'm currently working on a website using Next.js. I've converted the HTML elements of a page to JSX elements but for some reason, the CSS of the template isn't showing up. I've double-checked all the paths and even updated th ...

javascripthtmlcssreactjsnext.js

The 'innerText' property is not found in the 'Element' type

Currently, I am working with Typescript and Puppeteer. My goal is to extract the innerText from an element. const data = await page.$eval(selector, node => node.innerText); However, I encountered an error: The property 'innerText' is not ...

javascripttypescriptpuppeteer

Is it possible to create a website with a single session for all users using JavaScript

Greetings everyone, I am excited to be posting for the first time on stackoverflow. After dedicating a week to learning javascript and achieving some things I am proud of, I have hit a roadblock. As a self-learner, I kindly ask for your understanding. Cur ...

javascripthtml

Firefox having trouble displaying styles correctly

I just finished creating a website for my band, but I am having issues with it displaying correctly in Firefox. While everything looks great in Chrome and Safari, it seems like the stylesheet isn't loading at all in Firefox, leaving the page looking u ...

cssfirefox

Issue with `useState` not triggering rerender when there are changes in an array of objects -

I am facing an issue where I have an object with keys, each containing an array of objects with image files that need to be previewed after the user uploads them. However, the preview is showing the image from the previous upload instead of the current one ...

reactjsreact-hooks

Filter search results using selected region from dropdown menu

I have been attempting to retrieve the value from a dropdown list and customize the search functionality specifically for the selected field. The client should only be able to search within the chosen zone in the dropdown. I have been searching for a solut ...

javascriptc#asp.net.netasp.net-mvc-5

Steps to implement the selection of multiple items from a drop-down or list on a React.js website

Hi there, I am a newcomer to the world of React JS web development. I am looking for guidance on how to implement a feature where users can select multiple cities from a drop-down or list, similar to the examples shown in image1. Once the user has made th ...

htmlcssreactjsbootstrap-4bootstrap-multiselect