mui | styles converting your WPF application | Theme library

There is a set of default theme palette colors in our application, however for white labelling purpose I get theme primary and secondary color from API. Is there any way I can update those colors at runtime after receiving the values from API?

I am wrapping the MUI themeProvider at App level

I want to display some text over my gradient background. When I do it normally, just putting MUI's Typography or a simple

, it works. But the text is black, it doesn't have the best contrast.

I learned that I can use something like mix-blend-mode to somehow set the contrast according to the background, so I decided to use it.

This is how my div looks like:

I want to create a profile-like page. The contents would be like:

In Python you can do such a thing:

I don't want to use xpath on the elements below.

element :img_login, :xpath, '//[@id="main-wrapper"]/div/section/div/div[2]/div/div/div[1]/img' element :msg_login_senha_invalidos, :xpath, '//[@id="main-wrapper"]/div/section/div/div[2]/div/div/div[2]/div/p'

They are on the page as follows: element img_login

I am using MUI in the project and need to check the current breakpoint to render div for mobile, but each time for the first render isMobile and isDesktop value return false but then it set the correct value after second render. It works well from UI side, but I would like to avoid the first unnecessary render if it's possible?

I am trying to create a draggable Material UI dialog which includes in its contents an Autocomplete component. The result should look something like the following:

The desktop experience here is that when one drags the dialog (by grabbing the title area), the text field loses focus, and so the options Popper immediately disappears. However, the touch experience (tested iPhone 6 and iPad 7) is broken in that the text field remains focused while dragging, and so the popper doesn't disappear but also doesn't drag with the dialog:

Notice as a further weirdness that the text cursor (circled) lines up with the text field every time the dialog is grabbed but then does not move while the dragging is happening (this bug exhibits even without Autocomplete, so maybe beyond the scope of this question, but thought I'd mention for completeness).

I think I understand why this is happening: The popper is a child of body in the DOM and not the draggable Paper element, so it isn't being targeted the way one would naively hope. However, the fact remains that it is happening, and I would like a way to fix it, if possible.

Note that a bug has been filed here.

Code below:

There's an element to which I'm giving a class success. But React-Mui appends a text to it on DoM, say, something like mui-AbcXYZ-success. So when I'm doing this

expect( getByTestId('thirdCheck')).toHaveClass("success")

I don't get this test passing as it expects the complete name mui-AbcXYZ-success. I’m getting this passed only when I provide the exact name (wirh hyphenated text and random number that mui adds)

How do I test that?

I tried doing the following without reasult: expect( getByTestId('thirdCheck')).toHaveClass(/success/)

I also tried applying .className or .classList but that doesn’t give me the list of classes on the element.

I am learning React js, I am using below data code to bind the value receiving from API. I am using MUI Datatable to bind the data everything is working good. My issue is when I run react js application, its render the empty mui datatable table first then load the data. Is there anyway I can call api first onpageload when the home page load.