Is there a way to change the color of this icon from https://i.sstatic.net/kr5lv.png
I would like it to be this color: https://i.sstatic.net/dHh68.png
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:
https://i.sstatic.net/mIKl6.png
My challenge is displaying dynamic images from a database alongside details like color, name, and size, with a hover effect that shows a border. Whenever I hover over one image, the other images shift to the right or left. I want them to stay in place. T ...
I've got add I've got delete now I need to make modifications The add function simply adds to the collection without any organization The delete function is precise, using a key to locate and remove the desired item: addInput = (name) => ...
I have two divs named demo1 and demo2. I want the width of demo2 to automatically adjust when I drag demo1 left to right or right to left. <div class="wrapper"> <div class="demo"></div> <div class="demo2"&g ...
This section of my code retrieves JSON data from the backend API and displays it as a list. Here is an example of my JSON data: (15) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 0: {id: 1, t ...
I recently decided to challenge myself by recreating the Netflix registration page as a practice project. Using the flexbox model on the webpage, I encountered an issue with aligning the email input and the "Get Started" button. Despite trying different me ...
I have recently started learning React JS and JavaScript. To practice, I am working on a small project where I am facing an issue with creating dynamic rows and columns. My aim is to display data in 4 columns initially and then move to a new row and column ...
Currently, I am in the process of developing a rendering system for my application that extracts objects from a collection and processes them through JavaScript templates to generate additional children as the user scrolls through the page. The system is d ...
I am having trouble navigating to a different page in Next.js using the router.push function. The goal is to route to "example.js" by utilizing a variable called ChangePage, which leads to a single div element on that page. However, despite following the ...
Is there a way to dynamically remove the space between removed chips and older chips in Material-UI when deleting one of them? <div className="row contactsContainer"> {contacts.map((contac ...
I have implemented code in my css file to hide specific items from the topbar on my website. When I view the site on my desktop and inspect it with mobile view, the hidden items appear correctly concealed. However, when I access the website on my phone, ...
I am in the process of adding a "resize handle" to adjust the width of my left navigation panel. This handle, represented by a div, triggers an onMouseDown() event that calculates the necessary widths and applies them to the relevant elements during subseq ...
Is there a way to hide a <p> element when hovering over a link? My website is built with Drupal and uses the Superfish module for the navigation bar. When I hover over the links, a secondary nav bar drops down. I want the slogan of the website to di ...
This concerns an advertising website created using the MERN stack. I'm looking to organize data by ad type "reach-up-ad" and then display all other ads below this particular type. I will be fetching the data through axios and then utilizing mapping, ...
When a division in the advantage grid is clicked, the card body of another division collapses. However, this does not occur in the disadvantage grid. Clicking on one section in the disadvantage grid does not collapse another section as it does in the advan ...
https://i.sstatic.net/d2CIo.png On the left side, there is a map with controls, and on the right side, there are fields displaying the last update, a table, and an input field. I am looking to create a responsive design where when it reaches a certain si ...
I am working with turborepo using React (Vite) and NextJS, and I have shared components within the workspace. I have configured it to use server components, but this causes Vite to display a warning during build: ../../packages/ui/src/components/ui/alert- ...
While inspecting the site, I noticed that the body does not extend to 100% width of the screen when I reduce the size of the site. After removing the Bootstrap classes, the issue seems to be resolved. I even tried adding body{width: 100%} but it did not h ...
I'm in the process of developing a product page and I'd like to implement a feature where clicking on the Buy button triggers a pop-up menu to appear. I've been attempting to use the Checkbox hack to achieve this but have encountered some di ...
Within my getStaticProps function in next js, I am faced with the challenge of fetching multiple dynamic URLs and exporting the results as props to the component. As these URLs are automatically generated, I do not know how many there will be to fetch. My ...
My goal is to match the fk_city with the $id of each city in the 'list_cities' array, and then calculate the number of occurrences. const list_cities = [ { $id: '15FG', name: 'Pittsburg' }, { $id: '50HS', name: & ...