react实现全局改变字体大小

在React中全局改变字体大小可以通过多种方式实现，但最直接和常用的方法是通过CSS或CSS-in-JS库（如styled-components, emotion等）来设定全局样式。以下是一些实现方法：

方法1：使用全局CSS文件

1. 创建全局CSS文件：在你的项目中创建一个全局的CSS文件，比如命名为global.css。

2. 设置全局字体大小：在global.css中，使用*选择器或者html选择器来设置全局字体大小，并可以进一步设置body或其他元素的具体字体大小。

   /* global.css */
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   html {
     font-size: 16px; /* 基础字体大小 */
   }
   
   body {
     font-family: Arial, sans-serif;
     line-height: 1.6;
   }
   

3. 在React项目中引入全局CSS：确保在你的React项目的入口文件（如index.js或App.js）中引入了这个全局CSS文件。如果你使用的是Create React App，可以通过在src/index.js或src/App.js的顶部添加import './global.css';来实现。

方法2：使用CSS变量（自定义属性）

如果你想要更灵活地控制字体大小（例如，根据不同屏幕尺寸改变字体大小），你可以使用CSS自定义属性（也称为CSS变量）。

1. 在全局CSS中定义变量：

   /* global.css */
   :root {
     --base-font-size: 16px;
   }
   
   html {
     font-size: var(--base-font-size);
   }
   
   @media (min-width: 768px) {
     :root {
       --base-font-size: 18px;
     }
   }
   

2. 引入CSS文件：同上，确保在你的React项目中引入了global.css。

方法3：使用CSS-in-JS库

如果你倾向于使用CSS-in-JS库，如styled-components或emotion，你可以在根组件或全局样式组件中设置字体大小。

使用styled-components

// GlobalStyles.js
import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  :root {
    --base-font-size: 16px;
  }

  html {
    font-size: var(--base-font-size);
  }

  @media (min-width: 768px) {
    :root {
      --base-font-size: 18px;
    }
  }
`;

export default GlobalStyles;

// App.js
import React from 'react';
import GlobalStyles from './GlobalStyles';

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

export default App;

以上就是在React中全局改变字体大小的几种方法。选择哪种方法取决于你的项目需求和个人偏好。