ant design - control how to control "Segmented" transition background

Question

I have the following segmented

<Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />

I have to change the background colors:

.ant-segmented-item {
  background: #fff;
}

.ant-segmented-item-selected {
  background: red;
}

When I click on an item, I want the transition to be red. right no it is transparent and therefore I cant see the animation.
how is that possible?
Thanks
https://codesandbox.io/s/basic-antd-4-22-6-forked-qb3hqy?file=/index.css

Answer 1

I believe the solution is to add the transition property.

.ant-segmented-item {
  transition: red 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ant-segmented-item-selected {
  background-color: red;
}

.ant-segmented-thumb {
  background-color: red;
}

Let me know if it works !

---

EDIT: Adding background in .ant-segmented-thumb seem to work.

https://codesandbox.io/s/basic-antd-4-22-6-forked-izquri?file=/index.css