How to use the pseudo selectors in Inline Css in material UI?

Asked Nov 02 '22 at 13:36

Active Nov 02 '22 at 17:26

Viewed 26 times

Below code works for me when added to index.css in react project.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow:0 0 0 30px white inset !important;
}

I want to this in inline css. How can I use this code as inline css for material UI Textfield components using sx or styled component. Any sample code could be helpfull. Thank you

edited Nov 02 '22 at 17:26

asked Nov 02 '22 at 13:36

sujith kharvi

Inline styles cannot be used to style pseudo-classes. – Pointy Nov 02 '22 at 13:41
Is it possible to achieve it using styled component? – sujith kharvi Nov 02 '22 at 15:15
If your styled component tool creates CSS rules (as opposed to rules directly on element "style" attributes), then it may be possible. – Pointy Nov 02 '22 at 15:28
Could provide the sample code – sujith kharvi Nov 02 '22 at 17:17
I don't know how your styled components work. – Pointy Nov 02 '22 at 17:21

How to use the pseudo selectors in Inline Css in material UI?

0 Answers0