[英]!important inline styles in react
It's there a way to add inline styles with the?important override?有没有一种方法可以使用?重要的覆盖来添加内联样式?
style={
height: 20+'!important'
};
<div style={style}></div>
This isn't working as I would have hoped.这不像我希望的那样有效。
Apparently React does not support this.显然 React 不支持这一点。 But i got this hack as i did my research
但是我在研究时得到了这个黑客
<div ref={(node) => {
if (node) {
node.style.setProperty("float", "right", "important");
}
}}>
</div>
Good luck:)祝你好运:)
20+'!important'
is '20!important'
. 20+'!important'
是'20!important'
。
When you just give a number, react adds "px" for you;当你只给一个数字时,react 会为你添加“px”; but you're using a string, so you have to specify the unit.
但是您使用的是字符串,因此您必须指定单位。 Also I'm pretty sure there needs to be a space between "!important" and whatever's to the left of it.
此外,我很确定“!important”和它左边的任何东西之间需要有一个空格。
style={{ height: '20px !important' }};
A good trick to use which is cleaner and more consistent for other CSS properties:一个很好的使用技巧,它对其他 CSS 属性更清晰、更一致:
ref={(el) => el && el.style.setProperty(<property>, <value>, "important")}
Hope this helps!希望这可以帮助!
This is the only way I could get it to work with React 16.这是我可以让它与 React 16 一起工作的唯一方法。
const id="unique_id";
<React.Fragment>
<style>
{`
#${id} {
background-color: transparent !important;
}
`}
</style>
<Frame id={id} />
</React.Fragment>
I recommend using styled components , if you have a good reason to make use of !important
, as the style props do not support !important
and probably won't in the future.如果您有充分的理由使用
!important
,我建议使用样式组件,因为样式道具不支持!important
并且将来可能不会支持。
Here is an example where we overwrite Semantic-UI's padding
on grid columns
.这是一个示例,我们在
grid columns
上覆盖 Semantic-UI 的padding
。 You can actually leave out the !important
as " bumping up the specifity " is sufficient.您实际上可以省略
!important
,因为“ 提高特异性”就足够了。
const StyledColumn = styled.div(({size}) => ({className: `${size} wide column`})`
&&&&& {
padding-top: 0.3rem !important;
padding-bottom: 0.3rem !important;
}
`
<StyledColumn size="three"></StyledColumn>
Yeah the way I found to do this was that already mentioned above:是的,我发现这样做的方式是上面已经提到的:
const styles = (theme: any) => ({
panelSize: {
height: 480,
width: 360,
},
progress: {
height: '120px !important',
margin: theme.spacing.unit * 2,
width: '120px !important'
}
});
This is originally answered by Daniel above.上面的丹尼尔最初回答了这个问题。 I just want to share my answer as I refactor his answer to work with hooks.
我只是想分享我的答案,因为我重构了他的答案以使用钩子。
const ref = useRef(null);
const ref = useRef(null);
<div ref={ref}></div>
<div ref={ref}></div>
ref.current.style.setProperty(<property>, <value>, "important")
inside useLayoutEffectref.current.style.setProperty(<property>, <value>, "important")
Please see the sample codes below请参阅下面的示例代码
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>
)
}
Note:笔记:
I try the suggestions above for width, but could not get it to work.我尝试了上述关于宽度的建议,但无法使其正常工作。
This is what work for me, I created style.css file, and added in my case, width: 100% !important to a class, and then just import this file into my component, and call this class, and it work.这对我有用,我创建了 style.css 文件,并在我的情况下添加了 width: 100% !important 到一个类,然后将该文件导入到我的组件中,然后调用这个类,它就可以工作了。
There is another cleaner way mentioned in material Ui documentation which can be used with react to override the default behavior 在材料Ui文档中提到了另一种更清晰的方法,可以与react一起使用以覆盖默认行为
1- Declare a constant variable for style 1-为样式声明一个常量变量
const widthStyle = {
width:10
}
2- Use it with JSX for inline style 2-将它与JSX一起用于内联样式
<div style={widthStyle}></div>
a slite improvment with modern syntax to make code shorter:使用现代语法对代码进行了一些改进,以使代码更短:
<div ref={(node) =>
node?.style.setProperty("float", "right", "important")
}>
</div>
I solved it with setting className prop我通过设置 className 道具解决了它
.height {
height: 20px !important;
}
className={ styles.height }
I was able to resolve it by doing something like this:我能够通过做这样的事情来解决它:
style={
height: `20px ${" !important"}`
};
<div style={style}></div>
I had to add the space before ".important" because the browser kept removing that space when running the program.我必须在“.important”之前添加空格,因为浏览器在运行程序时会不断删除该空格。
It's there a way to add inline styles with the !important override?有没有一种方法可以使用!important覆盖添加内联样式?
style={
height: 20+'!important'
};
<div style={style}></div>
This isn't working as I would have hoped.这不是我希望的那样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.