如何从单点增加整个 React JS Web 应用程序的字体大小答案

【问题标题】：How to increase font size for whole React JS Web App From Single Point如何从单点增加整个 React JS Web 应用程序的字体大小
【发布时间】：2022-11-17 20:47:29
【问题描述】：

如何从单点增加整个 React JS Web 应用程序的字体大小 Like this

【问题讨论】：

使默认的 HTML CSS 字体大小使您的内容字体大小为 em 和 rem。因此，一旦 HTML 字体大小通过 javascript 增加，所有相关字体都会增加。

标签： reactjs

【解决方案1】：

我觉得这个解决方案是基于意见的，您可以创建一个 gloabl 变量文件并在您的应用程序中的任何地方导入，如果与字体相关的任何更改然后将其存储在浏览器中，这样当用户回来时用户应该获得相同的字体。

就像是

   :root {
      --font-size:20px
    }

并在执行点击事件后

const handleClick = () => {
  let root = document.documentElement;
  root.style.setProperty('--font-size', 30+"px")
  localStorage.setItem('fontSize', 30+"px")
}

如果值来自 localstorage，则设置它

root.style.setProperty('fontSize', localStorage.getItem('fontSize'))

你可以根据你的要求执行，你可以在你的CSS中使用这个变量

font-size:var(--font-size)

【讨论】：

【解决方案2】：

我最近在我的一个项目中解决了这个问题，如下所示：

索引.html

<style>
    :root {
        --base-font-size: 13.5px;
        font-size: var(--base-font-size);
    }
</style>

然后在您的项目中使用rem 来定义基于var(--base-font-size) 的大小或计算值。

要通过（即单击按钮）更改项目中的字体大小：

反应

const increaseSize = () => {
    const root = getComputedStyle(document.documentElement)
    let oldpx = Number.parseInt(root.getPropertyValue('--base-font-size').replaceAll('px'));
    root.style.setProperty('--base-font-size', (oldpx + 1) + 'px');
}

变量 based 和 rem 值之后应该根据 --base-font-size 更改它们的大小。

【讨论】：

【解决方案3】：

我自己从未尝试过，但我认为至少可以在 index.js 或 app.js 文件中使用 useState 和一个函数来设置字体大小。他们基本上会覆盖你的整个页面。

一个真正简单的例子是：

const [fontSize, setFontSize] =useState( *insert your default font size here* )

const handleButton = () => {

setFontSize(fontSize + 1)

}

<nav>
<button onClick={handleButton}/>
</nav>

<App style={{fontSize: {fontSize}}/>

如果您有任何其他样式，您可能必须用“！重要”覆盖。此外，使用 Tailwind CSS 可能会容易得多。

【讨论】：

【解决方案4】：

:root {
    --base-font-size: 10px;
}

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


// get css variable value
const root = getComputedStyle(document.documentElement);
console.log("CURRENT FONT SIZE: ", root.getPropertyValue('--base-font-size'))


// set css variable value
document.documentElement.style.setProperty(
    "--base-font-size",
    "50px",
)

【讨论】：