Why can't I get value from styles?

Question

React

In componentDidMount() I run a function to get the styles of the active slide.

handlerCalculateWidthSlides = () => {
        let slideActive = this._slider.innerSlider.list.querySelector('.slick-current');

        let stylesActiveSlide = getComputedStyle(slideActive);

        console.log(stylesActiveSlide); 
        console.log(stylesActiveSlide.width);
    };

I look at the first console log, height 900, in the second it displays the entire width of the screen.
I do it like this:

console.log(slideActive);

        // <div data-index="0" className="slick-slide slick-active slick-center slick-current" tabIndex="-1" aria-hidden="false" style="outline: none; width: 900px;">

        console.log(slideActive.style.width)
        
        // 20%

Where does 20% come from, I don’t understand?
I am using react-slick.

Answer 1

slideActive.style.width is the value given in the style attribute, and getComputedStyle returns the actual values ​​computed by the browser.
Most likely, the library changes the value of width at runtime. Try to open the developer panel and see the values ​​​​at a particular point in time there. There shouldn't be any magic.