[FIXED] How to increase font size for whole React JS Web App From Single Point

Issue

How to increase font size for whole React JS Web App From Single Point Like this

id='dv3'>

Solution

I recently solved this problem in one of my projects like this:

index.html

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

then use the rem in you project to define sizes or calculated values based on var(--base-font-size).

To change the fontsize in your project by (i.e. a click on a button):

React

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');
}

The variable based and the rem values should change their size according to --base-font-size afterwards.

Answered By - PRSHL
Answer Checked By - - Marilyn (ReactFix Volunteer)