请选择 进入手机版 | 继续访问电脑版
MSIPO技术圈 首页 IT技术 查看内容

react中styled-components 全局样式设置

2023-07-13

前言

使用 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

相关阅读

热门文章

    手机版|MSIPO技术圈 皖ICP备19022944号-2

    Copyright © 2024, msipo.com

    返回顶部