!反应中重要的内联样式

Question

它的存在方式来增加内嵌样式的!重要覆盖？

style={
  height: 20+'!important'
};

<div style={style}></div>

这不像我希望的那样有效.

Answer 1

显然React不支持这一点.但是当我做我的研究时,我得到了这个黑客

    <div ref={(node) => {
      if (node) {
        node.style.setProperty("float", "right", "important");
      }
    }}>                    
    </div>

祝好运:)

Answer 2

20+'!important'是'20!important'.

当你给一个数字时,反应为你添加"px"; 但是你正在使用一个字符串,所以你必须指定单位.此外,我敢肯定,需要有间"!重要"和什么是对的它的左边的空间.

style={
  height: 20 + 'px !important' // 20px !important
};

Answer 3

这是我可以让它与 React 16 一起工作的唯一方法。

const id="unique_id"; 
<React.Fragment>
    <style>
      {`
#${id} {
  background-color: transparent !important;
}
      `}
    </style>
    <Frame id={id} />
</React.Fragment>

Answer 4

一个很好的使用技巧，它对其他 CSS 属性更清晰、更一致：

ref={(el) => el && el.style.setProperty(<property>, <value>, "important")}

希望这可以帮助！

Answer 5

如果您有充分的理由使用样式组件，我建议您使用样式组件!important，因为样式道具不支持!important并且将来可能不会支持。

padding这是一个我们覆盖上的Semantic-UI 的示例grid columns。实际上您可以省略，!important因为“提高特异性”就足够了。

const StyledColumn = styled.div(({size}) => ({className: `${size} wide column`})`
    &&&&& {
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
    }
`
<StyledColumn size="three"></StyledColumn>

&&&&&& <- 提高特异性。