Javascript !react中的重要内联样式

这是一种添加内嵌样式的方法！重要的超控

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

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

风格={
高度：20+“！重要”
};

---

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

20+”！重要的“

是

”20！重要提示“

当你仅仅给出一个数字时，react会为你添加“px”；但是您使用的是字符串，因此必须指定单位。而且我很确定在“！important”和它左边的任何东西之间需要有一个空格

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

---

显然，React并不支持这一点。但我在做研究的过程中受到了这种攻击

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

{
如果（节点）{
node.style.setProperty（“float”、“right”、“important”）；
}
}}>                    

---

祝你好运：）

我尝试了上面关于宽度的建议，但没有成功

---

这对我来说很有用，我创建了style.css文件，并在我的例子中添加了width:100%！对一个类很重要，然后将这个文件导入到我的组件中，调用这个类，它就会工作。

是的，我发现这样做的方法如上所述：

const styles = (theme: any) => ({
panelSize: {
    height: 480,
    width: 360,
},
progress: {
    height: '120px !important', 
    margin: theme.spacing.unit * 2,
    width: '120px !important'
}

---

}))

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

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

const id=“unique\u id”；
{`
#${id}{
背景色：透明！重要；
}
`}

对于其他CSS属性来说，这是一个更干净、更一致的好技巧：

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

ref={（el）=>el&&el.style.setProperty（，“重要”）}

希望这有帮助

如果您有充分的理由使用

，我建议您使用！重要信息

，因为样式道具不支持

！重要的

，可能在将来

下面是一个例子，我们在

网格列

上覆盖语义UI的

填充

。实际上，您可以省略

！重要信息

as“”已足够

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

constyledcolumn=styled.div（（{size}）=>（{className:`${size}宽列`}）`
&&&&& {
填充顶部：0.3rem！重要；
填充底部：0.3rem！重要；
}
`

---

或者只是

'20px！important'

，因为不需要字符串连接。在react 0.14.x中工作，但在react 15.0.0中没有相同的问题

宽度：'100vw！important'

不工作，但

宽度：100+'vw！important'

甚至没有显示在检查器上。我正在用“%”进行尝试，运气不好。没有

！important

标志至少我在控制台中看到了我使用strike through的价值。GitHub上有一个官方声明，他们不是故意支持

！important

。所以这个答案不起作用！但是我不同意你永远不应该使用

！important

，这就是他们在

中不支持它的原因内联样式

。但还有另一种。是的，正在尝试获得一些好的列表过渡动画。需要知道精确的高度才能获得最平滑的动画。注意，我发现使用react（作为对象）设置“内联”样式使用

！important

时，如果您使用另一个

！important

变量更新属性，将出现问题。它将保留第一个

！important

属性，而不进行更新…您好，您应该了解如何使用标记在SOwtf上格式化代码，使用react，使所有简单的任务变得更困难