How to use :-ms-reveal as inline style in react?

Issue

I'm trying to hide the eye(Password Reveal control) which appear while entering password in inputbox in Microsoft Edge. For hiding it, we need to use :-ms-reveal. I tried to use it like MsReveal in inline style of react, but didn't work. Due to CSS file restrictions, I need to use inline styles in my project. So could anyone help me in resolving this issue?

Solution

It took almost a day to find the solution which I was looking for. Scenario was if you don't want to use 3rd party packages like Radium or Emotion (css-to-js), you can follow below method.

Use Template Literals for adding your code.

    const inputFieldStyle = `
               .inputField::-ms-reveal{
                       display: 'none'
               }`

Then you can use <style> tag where you pass above style like below:

const reactFunctionalComponent = (props) => {
  ...
  return(
    <>
      <style>
        {inputFieldStyle}
      </style>
    ...
    </>
  )
}

Answered By - Rohit Sawai