如何获得Storybook iframe中包含的组件的宽度/填充？

Question

问题：是否有办法通过获取元素引用并调用offsetWidth / style.paddingLeft /来从Storybook iframe中包含的组件（按类或ID）中提取宽度/高度/边距属性style.paddingRight？

目标：我在应用程序中使用了一些常规的“布局”组件-行，列，容器等-并且我希望能够在Storybook UI中动态显示填充或高度值是指开发人员或设计人员单击以查看Story并通过Storybook旋钮更改一些道具值的时候。

以下面的代码为例： 我希望能够删除我创建的硬编码PADDING_MAP对象，该对象将显示不同的填充值，而是在用户使用不同的prop值时使它们更改和更新。

为了尝试“查找”元素，我在Story本身中尝试了console.log(document.getElementByClassName)和console.log(document.getElementById)命令，以查看是否可以通过className或property来获取元素，但这并没有不行。

出于完整性检查的考虑，我还尝试在Chrome的控制台中运行$('.classNameHere')，以查看是否可以从那里拉出元素，但无法完成。

在我的story中：

import React from 'react';

import Row from 'app/shared/core/Row';

// Storybook
import { storiesOf } from '@storybook/react';
import { boolean, select, text } from '@storybook/addon-knobs';

const stories = storiesOf('Layout', module);

stories.add('Row', () => {
    const PADDING_MAP = {
        zero: '0px',
        sm: '4px',
        md: '16px',
        lg: '24px',
        xl: '48px'
    };
    const props = {
        size: select('prop: size', ['sm', 'md', 'lg', 'xl', 'zero'], 'md')
    };

    return (
        <div>
            <div className="Description-Header">Vertical padding: {PADDING_MAP[props.size]}</div>
            <div className="Row-Example-Container">
                <Row {...props} className="Row-Example">
                    <div className="Row-Example-Content">{'Content inside a row'}</div>
                </Row>
            </div>
        </div>
    );
});

通过上面记录的尝试，我无法获取对元素的引用以调用element属性函数。