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

user_9282474 0
Viewed 398

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?

microsoft-edge reactjs css
1 Answers

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>
    ...
    </>
  )
}
user_92824740
Related