如何在Reaction中使用:-ms-Display作为内联样式?

2022-04-09 00:00:00 reactjs microsoft-edge css

我正在尝试隐藏在Microsoft Edge的输入框中输入密码时出现的眼睛(密码显示控件)。为了隐藏它,我们需要使用:-ms-reveal。我尝试像MsReveal那样在内联风格的Reaction中使用它,但不起作用。由于css文件的限制,我需要在我的项目中使用内联样式。那么有谁能帮我解决这个问题吗?


解决方案

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

使用Template Literals添加代码。

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

然后,您可以使用<style>标记来传递上述样式,如下所示:

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

相关文章