styled-components

Question

考虑这个使用样式组件的 react-app 示例：

import styled from "styled-components";
import { createGlobalStyle } from "styled-components";
import React from "react";

const GlobalStyle = createGlobalStyle`
    [type="submit"] {
      color: red;
    }
`;

const StyledButton = styled.button`
  color: blue;
`;

function MyComponent() {
  return (
    <>
      <h1>My Component</h1>
      <button type="submit">regular button</button>
      <StyledButton type="submit">styled button</StyledButton>
    </>
  );
}

export default function App() {
  return (
    <>
      <GlobalStyle />
      <MyComponent />
    </>
  );
}

（看这个codesandbox）

我正在使用 [type="submit"] 为元素（按钮）设置全局样式，并希望稍后使用 StyledButton.

覆盖该样式

但是 styled-components 似乎在组件样式之后注入全局样式，或者至少以这种方式打印它。如果我们使用浏览器开发工具检查输出的 <head>，我们会发现：

.cshqdf{color:blue;}
[type="submit"]{color:red;}

这样，StyledButton设置的蓝色就被全局样式覆盖了。（两个 css 选择器具有相同的优先级，因此依赖于顺序。我在我的示例中专门使用了那些选择器来使问题清楚。）

我的问题：

为什么全局样式没有在组件样式之前注入？我预计会出现这种情况，因为 <GlobalStyle/> 在组件树中更高。
如何确保我的全局样式在组件样式之前注入，以便更容易被覆盖？

注：我完全知道有多种方法可以使 StyledButton 应用它的样式而不关心样式注入的顺序。一种可能性当然是：

const StyledButton = styled.button`
   && {
     color: blue;
   }
`;

但是，这样的解决方案不是我要找的。我正在尝试了解如何处理样式化组件的全局样式，以便具有相同优先级（用于组件）的选择器随后以样式出现 -sheet 所以我不需要额外的技巧。

Answer 1

这是一个已知错误：

https://github.com/styled-components/styled-components/issues/3146

您可以在 github 问题中查找解决方法。

styled-components - 为什么在组件样式之后注入全局样式？

styled-components - Why is global style injected after component styles here?

reactjs