样式化组件不会覆盖内联样式

Posted

技术标签:

【中文标题】样式化组件不会覆盖内联样式【英文标题】:Styled component doesn't override inline styles 【发布时间】:2021-08-02 02:18:26 【问题描述】:

我正在尝试覆盖第三方组件的内联样式。

我关注了文档how can i override inline styles

所以,我使用&[style] 覆盖了内联样式,但这不起作用。

我使用的第三方组件是CookieConsent

现在,我的组件看起来像这样:

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;

我也试过how can i override styles with higher specificity,但没有成功。

我发现覆盖样式的唯一方法是做类似的事情并使用!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);
  
`;

也试过了,没有成功

const StyledCookieBanner = styled(CookieConsent)`
  > div 
    // &&& 
    &[style] 
      justify-content: center;
      align-items: center;
      ...
    
  
`;

文档看起来很清楚,但我没有成功。

我错过了什么吗?这是可能的还是我应该使用style 组件道具?

【问题讨论】:

【参考方案1】:

从您链接的文档页面:

内联样式始终优先于外部 CSS,因此您不能通过简单地增加特异性来覆盖它。

让我们停在那里。 Styled Components 将 classes 添加到元素中。在 html/CSS 中,style 属性样式几乎总是胜过基于类的样式;没有任何样式组件(或任何其他基于类的库)可以改变这一点……除非您使用带有 !important 的“hack”,即……

不过有一个巧妙的技巧,就是将 style element-attr CSS Selector 与 !important 结合使用:

!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);
  
`;

都是正确的,也是你唯一的选择。

如果您真的想覆盖 style 属性...覆盖样式属性 :) 不要使用样式化组件,请在您的元素上使用 style 道具(或者在您的情况下,请 react-cookie-consent 采取一个style 道具来实现那个效果)。

【讨论】:

以上是关于样式化组件不会覆盖内联样式的主要内容,如果未能解决你的问题,请参考以下文章

Styled Components - 内联样式与媒体查询样式重叠

如何在 reactjs 中使用伪元素作为内联样式? [复制]

Gatsby 有没有办法将内联样式组件 CSS 导出到 CSS 文件中?

SVG:为啥外部 css 会覆盖文本的内联样式?

MailChimp 可编辑按钮的内联样式被覆盖

css 覆盖内联样式