如何在反应中使用 :-ms-reveal 作为内联样式？

【问题标题】：How to use :-ms-reveal as inline style in react?如何在反应中使用 :-ms-reveal 作为内联样式？
【发布时间】：2022-01-24 23:22:49
【问题描述】：

我试图隐藏在 Microsoft Edge 的输入框中输入密码时出现的眼睛（密码显示控件）。为了隐藏它，我们需要使用:-ms-reveal。我尝试像 MsReveal 那样以内联风格的反应使用它，但没有奏效。由于 CSS 文件的限制，我需要在我的项目中使用内联样式。那么有人可以帮我解决这个问题吗？

【问题讨论】：

关注这个：stackoverflow.com/questions/38922878/…
请关注这个stackoverflow.com/questions/32835837/…你不能把它写成内联css。

标签： css reactjs microsoft-edge

【解决方案1】：

花了将近一天的时间才找到我正在寻找的解决方案。场景是如果你不想使用像 Radium 或 Emotion (css-to-js) 这样的第三方包，你可以按照下面的方法。

使用Template Literals 添加您的代码。

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

然后你可以使用<style>标签来传递上面的样式，如下所示：

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

【讨论】：

感谢您发布此问题的解决方案。您可以将您的答案标记为已接受的答案。它可以在未来帮助其他社区成员解决类似的问题。感谢您的理解。