Customizing Material UI Stepper styles using CSS API

I am trying to customize the text color (represented by an SVG Icon) in Material UI StepIcon for active and completed steps only. Currently, I have successfully changed the icon color for those steps. This is how my custom MuiTheme appears:

export default createMuiTheme({
  overrides: {
    MuiStepIcon: {
      root: {
        '&$active': {
          color: styles.myGreen,
        },
        '&$completed': {
          color: styles.myGreen,
        },
      },
    }
  },
});

The entire stepper component looks like this:

https://i.sstatic.net/3a1Tw.png

Now, I want to change the color of the tick to gray for completed steps and the color of the number two to gray for the currently active step, while keeping inactive steps unchanged with a white fill.

Despite trying to modify the fill property as suggested in the official documentation, it does not seem to work as expected, showing a white fill in the developer inspector.

I am looking to apply this styling globally across my entire application. Any suggestions or solutions for achieving this?

javascriptcssmaterial-designmaterial-uiuistepper

Answer №1

it is necessary to customize the text class as well

export default createMuiTheme({
  overrides: {
    MuiStepIcon: {
      root: {
        '&$active': {
          color: styles.myGreen,
        },
        '&$completed': {
          color: styles.myGreen,
        },
      },
      text: {
        fill: <YOUR_DESIRED_COLOR>
      },
     },
    }
  },
});

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

What is the best way to design a group of radio buttons with corresponding labels at the top

I'm looking to create a structure like this in HTML: https://i.sstatic.net/wLcZs.png Does anyone know how I can achieve this layout so that the labels are aligned properly with the radio buttons? My main challenge is getting the horizontal labels ab ...

htmlcssradio-buttonsemantic-ui-react

Can you explain the distinction between align-content and align-items?

Can you explain the distinction between align-items and align-content? ...

csslayoutflexboxalignment

Locating the position of multiple repeated words

My question involves a complex laTeX string: let result = "\\frac{x}{2}+\\frac{3}{x}"; The task at hand is to locate the instances of "frac" in the string, store their positions in an array, find the first '}&a ...

javascriptlatex

Ways to reduce the width of a flex box

I am facing an issue with my main container where I have two items placed on the same line. Item 1 is an image linked to a URL and it should be positioned at the far left of the container. On the other hand, item 2 contains a font awesome icon that needs t ...

htmlcssfont-awesome

How to position child divs at the center of a parent div

I am looking to set the maximum width of the "circlecontainer" to 300px, but I also want my 4 child divs (each with a max width of 300px) to remain centered in the browser when it exceeds a width of 1200px. Currently, they are aligned to the left side. Be ...

htmlcss

Undefined global variable

Within my function, I have defined a global variable called window.playerLibrary. Interestingly, when I check the value of window.playerLibrary within the function itself (`var check #1`), it returns a value. However, if I try to check it just outside of t ...

javascriptajaxglobal-variables

The Textfield component in Material UI now automatically sets the default date to the current date when using the "date" type

I am using Material UI's textfield with the type set to "date" and I'm experiencing an issue where the date defaults to the current date instead of mm/dd/yyyy. Is there a way to prevent this behavior and display mm/dd/yyyy when the user loads the ...

javascripthtmlreactjsreact-nativematerial-ui

Issue: Unable to set headers after they have been sent while using express-fileupload in the application

app.post('/profile', function(req, res) { // save file if (req.files) { let sampleFile = req.files.sampleFile; sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) { if (err) ...

javascriptnode.jsexpress

Unable to retrieve property from NextRequest

Currently, I am attempting to utilize MiddleWare in conjunction with Next.js's Middleware and JWT. Upon logging cookies and the typeof cookies variable, this is what I see on my console: { token: 'token='myToken'; Path=/' } obj ...

javascriptjsonnext.js

Merge adjacent CSS blocks seamlessly without the need for JavaScript

I am facing an issue with styling div elements that have editable content through a WYSIWYG inline editor on my website. Users often do not understand the importance of enclosing similar blocks of code in containing DIVs for proper formatting, resulting in ...

htmlcsscss-selectors

Concerning Java's Map and Array functionalities

When working with Javascript, we have the ability to create statements like the one below. var f_names = { 'a' : 'Apple', 'b' : 'Banana' 'c& ...

javajavascriptarrays

Using the Angular translate filter within a ternary operator

I am currently working on translating my project into a different language. To do this, I have implemented the Angular Translate library and uploaded an external JSON file containing all the translations. Here is an example of how it looks: { "hello_wor ...

javascriptangularjsangular-translate

Challenges encountered when inserting nested data into MongoDB

I am currently in the process of constructing a database for a giveaway bot using MongoDB. When a new giveaway is initiated, the bot executes the following code to add the giveaway details to the database: const {mongoose} = require("mongoose") c ...

javascriptnode.jsmongodbmongoose

Distinguish between regular JSS and JSS with Component

I've been working on a project with React and Material-UI, utilizing JSS for styling. As the project grows, I'm looking to better organize the JSS structure. Currently, each component has its own JSS code within the component file. One thing I a ...

reactjsmaterial-ui

Prevent the automatic inflation of bubbles on the D3 World Map

Currently, I am developing a D3 world map with a zoom feature that allows users to zoom in up to the boundary level of any country or county by clicking on it. I have successfully added bubbles that point to various counties in Kenya, and these bubbles en ...

javascriptjqueryd3.js

Learn how to efficiently transfer a dynamic subtitle text value from an HTML5 video player to a database

I have successfully developed an HTML5 video player with subtitles. Currently, my goal is to allow the user to submit the subtitle text at a specific timestamp to a database. Despite trying various methods, I am facing challenges in fetching the subtitle t ...

javascriptjqueryhtml

I'm attempting to insert a line break after HTML elements that are being added from JavaScript code inside a `display: flex` div

I'm facing an issue where line breaks are not added after HTML elements are inserted via JavaScript upon clicking a button. For instance, the data from the inputs doesn't get separated even when I click submit multiple times: https://i.sstatic. ...

javascripthtmlcss

What is the best way to utilize purgeCss in conjunction with other module exports?

After reading the documentation, I want to integrate purgeCss into my NextJS project. The recommended configuration in the docs suggests updating the next.config.js file like this: module.exports = withCss(withPurgeCss()) However, I am unsure where exact ...

javascriptnext.jspostcsscss-purge

Troubleshoot padding problems in mpdf

Note: mpdf 6.0 Greetings, In my efforts to produce precise PDFs using mpdf for future printing purposes, I have encountered an issue with the positioning of elements on the page. I require these elements to be positioned precisely from the top left corne ...

cssmpdf

Generating a Stream for FormData implementation

I am currently utilizing an API to import a CSV file. The CSV file is generated in memory from a String and then uploaded using the request module. However, I am encountering difficulties in creating a Readable Stream from the String. To resolve this issue ...

javascriptnode.js