[英]Styled component doesn't override inline styles
I'm trying to override third party component inline style.我正在尝试覆盖第三方组件内联样式。
I followed the doc how can i override inline styles我按照文档如何覆盖内联 styles
So, I used &[style]
to override the inline style but this is not working.因此,我使用
&[style]
覆盖了内联样式,但这不起作用。
The third party component I use is CookieConsent我使用的第三方组件是CookieConsent
Right now, my component is looking like that:现在,我的组件看起来像这样:
import React from 'react';
import CookieConsent from 'react-cookie-consent';
import styled from 'styled-components';
const StyledCookieBanner = styled(CookieConsent)`
&[style] {
justify-content: center;
align-items: center;
width: calc(100% - 20px);
margin: 10px;
padding: 20px;
background-color: white;
border-radius: 22px;
box-shadow: 0 0 19px 3px rgba(0, 0, 0, 0.17);
}
`;
const CookieBanner = (): React.ReactElement => {
return (
<StyledCookieBanner debug buttonText='Ok'>
Cookie
</StyledCookieBanner>
);
};
export default CookieBanner;
I also tried how can i override styles with higher specificity without success.我还尝试了如何以更高的特异性覆盖 styles 而没有成功。
The only way I found to override the style is doing something like that and use !important
我发现覆盖样式的唯一方法是做类似的事情并使用
!important
const StyledCookieBanner = styled(CookieConsent)`
> div {
justify-content: center;
align-items: center !important;
width: calc(100% - 20px) !important;
margin: 10px;
padding: 20px;
background-color: white !important;
border-radius: 22px;
box-shadow: 0 0 19px 3px rgba(0, 0, 0, 0.17);
}
`;
and also tried, without success也试过了,没有成功
const StyledCookieBanner = styled(CookieConsent)`
> div {
// &&& {
&[style] {
justify-content: center;
align-items: center;
...
}
}
`;
The docs seems pretty clear but I didn't succeed.文档看起来很清楚,但我没有成功。
Did I miss something?我错过了什么? Is that possible or should I use the
style
component props?这可能还是我应该使用
style
组件道具?
From the documentation page you linked:从您链接的文档页面:
Inline styles will always take precedence over external CSS, so you cannot override it by simply increasing specificity.
内联 styles 将始终优先于外部 CSS,因此您不能通过简单地增加特异性来覆盖它。
Let's stop right there.让我们停在那里。 Styled Components adds classes to elements.
Styled Components 向元素添加类。 In HTML/CSS,
style
attribute styles will almost always trump class-based styles;在 HTML/CSS 中,
style
属性 styles 几乎总是胜过基于类的 styles; there is nothing Styled Components (or any other class-based library) can do to change that... unless you use a "hack" with !important
that is...没有任何样式组件(或任何其他基于类的库)可以改变这种情况......除非你使用带有
!important
的“hack”,即......
There is a neat trick however, which is to use the style element-attr CSS Selector in conjunction with:important:
然而,有一个巧妙的技巧,即使用样式 element-attr CSS Selector 与:important:
The !important
is an essential part of that hack, and so the (working) code you posted: !important
是该 hack 的重要组成部分,因此您发布的(工作)代码:
const StyledCookieBanner = styled(CookieConsent)`
> div {
justify-content: center;
align-items: center !important;
width: calc(100% - 20px) !important;
margin: 10px;
padding: 20px;
background-color: white !important;
border-radius: 22px;
box-shadow: 0 0 19px 3px rgba(0, 0, 0, 0.17);
}
`;
is both correct, and your only option.都是正确的,也是你唯一的选择。
If you really want to override style
attributes... override the style attributes:) Don't use Styled Components, use a style
prop on your element (or in your case, ask react-cookie-consent
to take a style
prop to achieve that effect).如果您真的想覆盖
style
属性...覆盖样式属性:) 不要使用样式化组件,请在您的元素上使用style
道具(或者在您的情况下,要求react-cookie-consent
采用style
道具来实现那个效果)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.