Question

有一种方法可以使用！important覆盖添加内联样式吗？

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

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

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

Answer 1

20+'!important'是'20!important'。

当你给出一个数字时，反应会增加＆＃34; px＆＃34;为了你;但是您正在使用字符串，因此您必须指定单位。此外，我非常确定需要在＆＃34;！important＆＃34;之间留出空间。以及它左边的任何东西。

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

Answer 2

显然React不支持此功能。但是当我做我的研究时，我得到了这个黑客

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

祝你好运：）

Answer 3

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

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

Answer 4

这最初是由上面的 Daniel 回答的。我只是想分享我的答案，因为我重构了他的答案以使用钩子。

定义引用 const ref = useRef(null);
将 ref 添加到您想要的节点（例如 div、table）<div ref={ref}></div>
在 useLayoutEffect 中添加此代码 ref.current.style.setProperty(<property>, <value>, "important")

请看下面的示例代码

import React, { useRef, useLayoutEffect } from "react";


const SampleComponent = () => {

   const ref = useRef(null);

   useLayoutEffect(() => {
    ref.current.style.setProperty("border-top", "0px", "important");
  }, []);

   return (
      <div ref={ref}>
         {/* additional codes here */}
      </div>
   )
}

注意：

属性采用 CSS 格式（例如“border-top”）

Answer 5

我尝试上面的宽度建议，但无法让它工作。

这对我有用，我创建了style.css文件，并在我的情况下添加了宽度：100％！对一个类很重要，然后只需将这个文件导入到我的组件中，然后调用这个类，然后调用它工作

Answer 6

是的，我发现这样做的方式是上面已经提到的：

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

}）;

Answer 7

一个很好的使用技巧，它对于其他CSS属性而言更加干净和一致：

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

希望这会有所帮助！

Answer 8

material Ui documentation中提到了另一种更清洁的方法，可与react一起使用以覆盖默认行为

1-为样式声明一个常量变量

const widthStyle = {
  width:10
}

2-与JSX一起用于内联样式

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

Answer 9

这可以使用CSS变量和CSS文件来完成：

android:src="@drawable/aaa_tn"

div {
   --real-height: 10px; /* default value */
   height: var(--real-height) !important;
}

Answer 10

如果您有充分的理由使用!important，我建议使用styled components，因为样式道具将来不支持!important，并且可能不支持won't

在此示例中，我们在padding上覆盖了语义UI的grid columns。实际上，您可以省去!important，因为“ bumping up the specifity”就足够了。

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

&&&&&& <-提高专属性。

！反应中重要的内联样式

10 个答案: