react使用js媒体查询，屏幕大小不同滚动条高度不同

let scrollLength =0;
let bigScreen = window.matchMedia('(min-width:1200px)');
let normalScreen= window.matchMedia('(min-width:992px)');
let smallScreen= window.matchMedia('(min-width:768px)');
  if(bigScreen .matches) {
        console.log("大屏幕(>=1200)");
        scrollLength = 400
    }else if(normalScreen.matches){
        console.log("中等屏幕(>=992&<=1200)");
         scrollLength = 300
    }else if(smallScreen.matches){
        console.log("小屏幕(>=768&<=992)");
        scrollLength = 200
    }else{
        console.log("超小屏幕(<=768)");
    }