react中styled-components 全局样式设置

news2024/11/26 12:44:06

前言

使用 styled-components 库时，你可以使用它的 createGlobalStyle 函数来设置全局样式。下面是一个示例：

安装 styled-components

npm install styled-components

导入 createGlobalStyle

在你的代码文件中导入 createGlobalStyle：

import { createGlobalStyle } from 'styled-components';

组件中引用

接下来，使用 createGlobalStyle 创建全局样式组件，并定义你的全局样式规则。例如，你可以在组件中设置全局背景色和字体样式：

const GlobalStyles = createGlobalStyle`
  body {
    background-color: #f2f2f2;
    font-family: Arial, sans-serif;
  }
`;

export default function App() {
  return (
    <>
      <GlobalStyles />
      {/* 其他组件 */}
    </>
  );
}

备注：这里创建了一个名为 GlobalStyles 的全局样式组件，并在其中使用 CSS 模板字符串语法定义了全局样式规则。在这个示例中，我们设置了 body 的背景色和字体样式。

最后，将 <GlobalStyles /> 组件放置在应用程序的根组件（例如 App）中，并确保它位于其他组件之前。这样，在整个应用程序中的所有页面中都会应用这些全局样式。

原文地址

react中styled-components 全局样式设置-小何博客前言使用 styled-components 库时，你可以使用它的 createGlobalStyle 函数来设置全局样式。下面是一个示例：安装 styled-componentsnpm install styled-components导入 createGlobalStyle在你的代码文…https://ligo100.cn/qianduanjishu/514.html