[joy-ui][Select] Floating label Select about material-ui HOT 4 OPEN

I just checked the code provided here https://mui.com/joy-ui/react-input/#floating-label and i suggest modifying 3 things :
1)Add a transition for the opacity of the placeholder text in the StyledInput component.
2) Adjust the label color on focus to match the focused highlight color.
3)Use theme palette for the label color and theme typography for the font weight in the StyledLabel component.

i'll provide a screenshot of where to modify:

from material-ui.

I just checked the code provided here https://mui.com/joy-ui/react-input/#floating-label and i suggest modifying 3 things : 1)Add a transition for the opacity of the placeholder text in the StyledInput component. 2) Adjust the label color on focus to match the focused highlight color. 3)Use theme palette for the label color and theme typography for the font weight in the StyledLabel component.

i'll provide a screenshot of where to modify:

I haven't StyledInput component, because mui joy uses button instead of input or select. But I tried anyway , it didn't work.

from material-ui.

What if we need to adjust the styling component accordingly to a button instead of a Select or input component?
i think this will work

from material-ui.

Could you send me codesandbox link after do it? Because, it didn't work.

from material-ui.