js 动态改变根元素rem大小

效果

以react 为例

逻辑

const eStyle = useRef<HTMLElement>(document.createElement("style"));
const eHead = useMemo<HTMLHeadElement | null>(
  () => document.querySelector("head"),
  []
);

const handleChangeRem = useCallback(() => {
  eStyle.current.innerHTML = `
    html {
      font-size : 200% !important;
    }
  `;
  eHead?.appendChild(eStyle.current);
}, [eHead]);

const handleReductionRem = useCallback(() => {
  eHead?.removeChild(eStyle.current);
}, [eHead]);

import { FC, ReactElement, useCallback, useMemo, useRef } from "react";
import { Button, CenterBox } from "../../components/BUI";

interface IProps {}

const Mongo: FC<IProps> = (): ReactElement => {
  const eStyle = useRef<HTMLElement>(document.createElement("style"));
  const eHead = useMemo<HTMLHeadElement | null>(
    () => document.querySelector("head"),
    []
  );

  const handleChangeRem = useCallback(() => {
    eStyle.current.innerHTML = `
    html {
      font-size : 200% !important;
    }
    `;
    eHead?.appendChild(eStyle.current);
  }, [eHead]);

  const handleReductionRem = useCallback(() => {
    eHead?.removeChild(eStyle.current);
  }, [eHead]);

  return (
    <CenterBox>
      <Button margin onClick={handleChangeRem}>change REM</Button>
      <Button onClick={handleReductionRem}>Reduction REM</Button>
    </CenterBox>
  );
};

export default Mongo;