将 *all* styled-system 属性添加到 styled-component 对性能有何影响？

Question

当 styled-system 与 styled-components 一起使用时，加载比我可能使用的更多道具对性能有什么影响？

例如，这是我目前拥有的基本 Div 组件，但还有大量其他道具我 没有 使用 -- 例如， fontSize 和 fontSizeProps 作为许多其他示例中的两个。

import React from 'react';
import { themed } from 'Utils/theme.helpers';
import styled from 'styled-components';
import {
 alignSelf,
 AlignSelfProps,
 height,
 HeightProps,
 maxHeight,
 MaxHeightProps,
 maxWidth,
 MaxWidthProps,
 minHeight,
 MinHeightProps,
 minWidth,
 MinWidthProps,
 order,
 OrderProps,
 overflow,
 OverflowProps,
 space,
 SpaceProps,
 width,
 WidthProps,
} from 'styled-system';

export type DivProps = React.PureComponent<JSX.IntrinsicElements['div']> &
 AlignSelfProps &
 OrderProps &
 OverflowProps &
 SpaceProps &
 WidthProps &
 MaxWidthProps &
 MinWidthProps &
 MaxHeightProps &
 HeightProps &
 MinHeightProps;

export const Div = styled.div<DivProps>(
    {
 boxSizing: 'border-box',
    },
 space,
 width,
 minWidth,
 maxWidth,
 height,
 minHeight,
 maxHeight,
 order,
 alignSelf,
 overflow,
 themed('container')
);

Answer 1

可以忽略不计。

1. 前 3 个 Empty div 是没有道具的样式系统组件。
2. 彩色 div 来自您的 Div 示例，每个示例有 1 个颜色道具。
3. 最后一个样式 div 只是一个没有样式系统的样式组件。

我想您可以使用更复杂的组件来扩展它，但我认为渲染时间会以线性时间增长。