如何在React中将全局css文件转换为样式化组件？

6pp0gazn 于 2022-12-24 发布在 React

关注(0)|答案(1)|浏览(113)

我有一个问题。我有多个CSS文件，其中一个包含了我的大部分CSS。我想把所有的CSS在该文件中的一个样式组件，但不知何故，使其全球这是我试图实现的主要事情。我宁愿避免打破该文件成较小的样式组件。有人知道如何做到全球？
我的css文件

.Container {
  background: red;

  .Wrapper {
    background: blue;

    .Box {
      background: yellow;
    }
  }
}

我想我有30-50-100个这样的类，我需要使用样式化组件使它们全局化

css

来源：https://stackoverflow.com/questions/74901583/how-to-convert-a-global-css-file-to-a-styled-component-in-react

1条答案

按热度按时间

dphi5xsq1#

我认为你可以使用样式化组件来使你的css/classes全局化，把所有的都放到一个样式化组件中，然后用这个组件来 Package 你应用中的其他所有东西，这样你的样式化组件看起来就像这样：

export const GlobalStyles = styled.div`
.Container {
  background: red;

  .Wrapper {
    background: blue;

    .Box {
      background: yellow;
    }
  }
  ...more global css
}
`;

然后将<GlobalStyles>导入到顶层组件所在的位置（我假设在您的示例中是.container组件），并使用它 Package 顶层组件：

<GlobalStyles>
  <div className="container">
    <the rest of your app />
  </div>
</GlobalStyles>

赞(0）回复(0）举报 2022-12-24

我来回答

如何在React中将全局css文件转换为样式化组件？

1条答案

相关问题

热门标签

最新问答