组件
系统道具将一组标准的属性应用到组件上，这些属性可以用来动态地改变组件的外观。
系统道具是配对的seed主题的价值，以便将自定义样式应用于组件。在下面的示例中，颜色正在被应用到组件。
系统支柱(颜色在本例中)匹配到颜色CSS属性，主题值为from我们主题的颜色类别。
根据组件的需要，《Seeds》中的每个组件都可以访问特定的系统道具组。每个组件都得到常见的组，它使组件能够访问控制颜色、背景色、边距和填充的props。
你可以在Seeds的每个组件页面上找到可用的系统道具列表。以下是所有可用的组:
当一个单一的主题值被赋予一个系统道具，该值将应用于每一个屏幕尺寸。当给定一个值数组时，这些值将分布在当前主题中指定的断点。
您可以使用下面的工具来学习数组道具所需的语法，并确切地了解您的值将应用于什么屏幕大小。
[100, null, 300, null, 500]
注意，如果一个值在多个断点上重复出现，则零值可以避免生成不必要的CSS。
Racine的大多数组件都接受作为它允许使用者更改组件呈现的根元素。
例如,盒子组件作为跨度标记，而不是其默认值(在本例中，div）.
重要的是:更改根元素会影响组件的样式和可访问性。使用常识来指定作为尝试使用与组件的现有根元素相关的HTML元素。例如，如果组件通常呈现一个div泰格，别把它改成表格。
如果你正在用样式组件扩展一个Racine组件，像这样:
常量<跨度class="token plain">
MyBox<跨度class="token plain">
＝<跨度class="token plain">
风格<跨度class="token punctuation" style="color:#929a9b">（<跨度class="token maybe-class-name">盒子<跨度class="token punctuation" style="color:#929a9b">）<跨度class="token template-string template-punctuation string" style="color:#00a99c">｀<跨度class="token template-string css language-css">
//这里的样式…
｀ 的作为Prop在这种情况下将不再起作用，因为它将改变的基本元素MyBox而且你会丢失应用到根组件上的样式(在本例中，盒子）.要绕过这个问题，使用forwardedAs像这样的道具:
<<跨度class="token maybe-class-name">MyBox<跨度class="token plain">forwardedAs<跨度class="token operator" style="color:#ffbc00">＝<跨度class="token string" style="color:#00a99c">“跨越”<跨度class="token plain">
/<跨度class="token operator" style="color:#ffbc00">>