通过stylesheet修改全局样式

1,464 阅读1分钟

进入某组件时让滚动栏隐藏,退出时让滚动栏显示。通过document.styleSheets解决。 注意:document.styleSheets是只读属性,不能新增或者删除,但是可以通过指定方法修改其内部样式规则。

import { useEffect } from 'react';

// 隐藏滚动条钩子函数
export default () => {
    useEffect(() => {
        // 去掉滚动条
        document.styleSheets[0].insertRule(
            'body::-webkit-scrollbar { display: none }',
            0
        );

        return () => {
            document.styleSheets[0].deleteRule(0);
        };
    }, []);
};