Changing the color of a mui Divider

Jennifer De Goede 0
Viewed 27

I would like to have a MUI Divider that is half green and half gray. Is there a way to do this?

This is my divider:

      <Divider className="bg-darkGreen rounded-xl h-3.5" orientation="horizontal" />

This is how it looks:

enter image description here

And this is how I would like it to look:

enter image description here

Is this possible to achieve??

material-ui
1 Answers

You can achieve it by custom css styling :

<Divider className="divider"></Divider>

and css :

.divider{
          height: 20px;
          border-radius: 2.5rem;
          background: lightgray;
          position: relative;
        }
.divider:after{
          content: "";
          position: absolute;
          top:0;
          left:0;
          width: 50%;
          height: 20px;
          border-radius: 2.5rem;
          background: green;
        }

Here is the demo : stackblitz

Then you can use divider class wherever you need

debugger0
Related