如何使用样式化组件动态创建动态媒体查询而不进行重复查询?

我使用样式化的组件为组件库创建一个小的网格系统。系统有五个断点,每个断点都有自己的总列数(总数为12或16)。每个断点也有自己的值(列之间)。

这是每个断点的基本配置:

export const BREAKPOINTS = {
    xs: {
        columns: 12,
        gutter: 16,
        minWidth: 0,
    },
    sm: {
        columns: 12,
        gutter: 20,
        minWidth: 768,
    },
    md: {
        columns: 12,
        gutter: 40,
        minWidth: 1024,
    },
    lg: {
        columns: 16,
        gutter: 48,
        minWidth: 1440,
    },
    xl: {
        columns: 16,
        gutter: 56,
        minWidth: 1920,
    },
};

<Column /> 采用以下道具的组件:

Column.defaultProps = {
    autofill: false,  // Should the column take up all available space?
    children: null,
    offset: null,     // Number of columns to offset this column by
    scope: null,      // For nested columns you’ll pass in number of columns the parent inhibits
    size: 1,          // Number of spaces this column should span
    tagName: 'div',
};

对于每个实例 <列/> 我正在执行以下计算并创建这些媒体查询:

const StyledColumn = styled.div.attrs(props => ({
    autofill: props.autofill,
    offset: props.offset,
    scope: props.scope,
    size: props.size,
}))`
    /* If the autofill is true, instruct column to take up available space. */
    ${props => props.autofill && css`
        flex-basis: auto;
        flex-grow: 1;
    `}

    ${() => Object.keys(BREAKPOINTS).map(key => {
        return css`
            @media (min-width: ${BREAKPOINTS[key].minWidth}px) {
                margin-left: ${BREAKPOINTS[key].gutter / 2}px;
                margin-right: ${BREAKPOINTS[key].gutter / 2}px;
                width: calc((${props => props.size} / ${props => props.scope || BREAKPOINTS[key].columns} * 100%) - ${BREAKPOINTS[key].gutter}px);
            }
        `;
    })}
`;

size="6 / 4" 哪里 6 / 4

无论哪种方式,上面的代码都会多次创建相同的媒体查询,具体取决于查询次数 <列/> 页面上有组件。因为在任何给定的时间,页面上都可能有几十个页面,这显然不是解决这个问题的最佳方式。

如何避免在这样的系统中多次创建相同的媒体查询?我怎样才能避免在每个实例中进行如此多的处理呢 < 组件?