Is there a way to change the color of this icon from
I would like it to be this color:
I have tried using .Mui-disabled but it didn't work, not sure if it's .Mui-active or .Mui-completed
Here is the sandbox link for reference:
Any assistance would be appreciated. Thank you!
It took some effort to achieve this, but I managed to make it work with a few styling tweaks.
To start, I added a round and visible border to each icon. The style rule also ensures that the icon color is white, excluding checked icons for the usual look.
".MuiSvgIcon-root": {
borderRadius: "50%",
border: "1px solid #1976d2"
},
".MuiSvgIcon-root:not(.Mui-completed)": {
color: "white"
}
Then, I matched the text color with the border color and made it bolder for better readability.
".MuiStepIcon-text": {
fill: "#1976d2",
fontWeight: 500
}
Lastly, I adjusted the margin for active icons to account for the added border thickness. The check icon remains white with fill: "white".
".MuiSvgIcon-root.Mui-active": {
color: "#1976d2",
padding: "3px",
borderRadius: "50%",
border: "1px solid #1976d2",
marginY: "-3px"
},
".Mui-active .MuiStepIcon-text": {
fill: "white"
}
Here is the final result:
I have a numbered list that I would like to add a left border to. <ol class="steps"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <ol> .steps {border-left: 5px double #7ab800;} When viewing in Fir ...
Currently, I am using the vue-slider component and would like to customize the color of the slider itself. The specific class that needs to be styled is "vue-slider-dot-tooltip-inner". Below is a screenshot displaying the original CSS styling for vue-slid ...
Take a look at this example: In the provided example, there is a background landing page that expands to fit the width of the viewport, remains responsive, and does not take up the full width of the page. How can you utilize bootstrap to manually code an ...
Looking to implement a straightforward button component in a Next App using Tailwind CSS, where I can pass values such as background color, text color, etc. through props and use them to render different types of buttons within my application. Take a look ...
I want to make my Typography field editable by transforming it into an input. Now, I need this input to have the same style as before. How can I achieve this without having to manually copy the CSS styles? It seems like a tedious and imperfect solution. C ...
I'm facing a common CORS issue in my application while trying to call an API. The API I am attempting to access can be found here: https://github.com/nickypangers/passport-visa-api Below is the code snippet used for making the API call: const getVi ...
Within the confines of a PDF's single-line display, I am in need of including text that does not contain new lines. While using an input instead of a textarea seems like the ideal choice, inputs do not naturally support line breaks and utilizing keydo ...
A graphic designer has provided us with an image featuring three selection boxes. I implemented the necessary HTML elements and CSS to display three overlapped selection boxes on top of the image, using pixel values for positioning. However, the original ...
Is there a way to calculate and display the average value of columns at the bottom of a table? The rows look like this: const rows = [ createData("Frozen yoghurt", 159, 6.0, 24, 4.0), createData("Ice cream sandwich", 237, 9.0, 37, 4.3), createData( ...
Suppose I have two HTML pages: index.html and embed.html. Within embed.html, there is an arbitrary HTML page that I want to embed inside index.html. I attempted the following: <!DOCTYPE html> <html lang="en"> <head> <me ...
I am tasked with changing the color of a specific table row based on user interaction. The table consists of multiple rows, each containing a button or image. When the user clicks on one of these buttons or images, a popup appears. Upon successful data sub ...
I'm currently in the process of building a web application that utilizes React and Next.JS as the backend, with Firebase serving as the database. Everything related to data fetching is functioning correctly; however, I've encountered an issue wit ...
Recently, I came across the <h:outputStylesheet/> tag with a converter attribute. I tried attaching a dummy (pass-through) converter to it, but to my surprise, nothing happened. Upon further investigation, it appears that the converter is not even in ...
Looking to create a unique loader for my company that features our logo with a moving line border or rotating icons that relate to our business model. I have the images ready, but I'm unsure of how to build a custom loader in react-native or react... ...
Currently, I am developing a proof of concept micro frontend app using single-spa, react, and material-ui. An issue has arisen where the generated class names from Mui are conflicting due to multiple individual apps being registered within the parent app, ...
I am facing an issue with cdkDrag where a small preview of the item being dragged shows up. I want to disable this feature and remove any CSS classes related to the dragging state. Can anyone guide me on how to achieve this? As you can see in the image, t ...
What are some recommended strategies for optimizing webpage loading speed? What key factors should be taken into consideration? ...
My project involves creating a CRUD application using React and Material UI. One of the requirements is to have a main screen that displays records in a table format, with a floating Fab button positioned above the table. The challenge is to ensure that th ...
I've checked my code thoroughly, but when I deploy it to localhost, something seems off. Even after disabling all the components and running npm install, the issue persists. https://i.stack.imgur.com/i04eY.png Oddly enough, everything seems fine in ...
I have implemented a next-intl library to enable multi-language support on my website. This means that the paths for different languages look like www.next.com/de or www.next.com/en Currently, I am utilizing NextJS 14. <NextLink href="/support-us& ...