[joy-ui] LinearProgress documentation example with MixBlendMode does not color text properly

[khgiddon]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/old-framework-dkjcyh?file=%2Fsrc%2FDemo.js

This example is directly from the "Edit in Code Sandbox" link on the final LinearProgress example: https://mui.com/joy-ui/react-linear-progress/#common-examples

Current behavior

Currently the text is only light, instead of changing color based on progress bar progress (as in the documentation).

Expected behavior

The text should be dark until the progress overlaps it, at which point it becomes light. The intended behavior is working correctly on this page: https://mui.com/joy-ui/react-linear-progress/#common-examples

Context

I am trying to use LinearProgress with Typography in the bar that changes color, as in the example in the LinearProgress component documentation.

Your environment

Not including because this example is directly from the documentation.

Search keywords: linearprogress

[adebiyial]

@khgiddon my best bet is that the LinearProgress needs a background color of its own or an inherited one from a parent element or root element (body). Can you give it a background color like so:

<LinearProgress
  // ...
  sx={{
    // ...
    backgroundColor: "white"
  }}
>
  {/* ... */}
</LinearProgress>

[khgiddon]

Thank you @adebiyial! This worked: https://codesandbox.io/p/sandbox/nameless-breeze-z4n66n

[adebiyial]

Awesome @khgiddon. Glad I could help.

[siriwatknp]

@khgiddon Do you want to submit a fix to the docs?

[khgiddon]

@khgiddon Do you want to submit a fix to the docs?

Sure, @siriwatknp, I will.