在 Styled-Component 类之前添加静态父类

Posted 2023-03-15

【中文标题】在 Styled-Component 类之前添加静态父类

【英文标题】：Prepend static parent class before Styled-Component classes

【发布时间】：2022-01-09 03:56:00

【问题描述】：

我正在尝试用我们的 Styled Component App 找出一些东西。对于上下文，我们创建了一个应用程序，该应用程序将存在于一个已经拥有自己的全局样式表的网站中。问题是，当我们在网站中插入应用程序时，我们生成的大量样式会被全局样式表覆盖，该样式表使用父类来包装一些元素。

生成的 HTML

<div class="PARENT_CLASS">
  <div id="PARENT_ID">
    <div id="MY_APP">
      <div class="sc-gtsrHT ddDIoa test-wrapper">
        <a href="/">Click me</a>
      </div>
    </div>
  </div>  
</div>

生成的 CSS

/* WEBSITE STYLE */
.PARENT_CLASS #PARENT_ID a 
  color: #0ae;


/* SC GENERATED */
.ddDIoa a 
  color: red;

反应 javascript

const TestWrapper = styled.div`
  a 
    color: red;
  
`;

const A = styled.a`
  color: red;
`;

const Content = () => (
  <TestWrapper className="test-wrapper">
    <A href="/">Click me</A>
  </TestWrapper>
);

有没有办法将静态类 (.PARENT_CLASS #PARENT_ID) 预先添加到样式化组件生成的所有类中，而不必对我创建的每个单独的组件进行操作。

谢谢

【参考方案1】：

这个问题在样式化组件文档中得到了解答。 Highlighted Documentation

此解决方案使用babel-plugin-styled-components-css-namespace 将类/ID 附加到所有样式化的组件组件中。