介绍
在前端项目中，使用样式库能够节约时间和资源，提升开发效率。而 @bbc/gel-foundations-styled-components 是 BBC 设计系统 GEL 的一部分，是基于 styled-components 库的样式库。
安装
使用如下命令安装 @bbc/gel-foundations-styled-components：
npm install @bbc/gel-foundations-styled-components
用法
导入
在组件页面中，使用方式如下：
-- -------------------- ---- -------
------ ------ ---- --------------------
------ - ----------------- --------------- - ---- -----------------------------------
------ - ---------------------------- - ---- --------------------------------
----- ------- - -----------
------- ------------------ --
------ ------ --- ----------- -------------------------------- -
------- ------------------- --
-
--预设变量
@bbc/gel-foundations-styled-components 提供一系列的预设变量，列举如下：
GEL_SPACING_NONE: 0 像素GEL_SPACING_HLF: 5 像素GEL_SPACING_SNG: 10 像素GEL_SPACING_DBL: 20 像素GEL_SPACING_TRPL: 30 像素GEL_SPACING_QUAD: 40 像素GEL_GROUP_0_SCREEN_WIDTH_MIN: 0 像素GEL_GROUP_1_SCREEN_WIDTH_MIN: 600 像素GEL_GROUP_2_SCREEN_WIDTH_MIN: 1008 像素GEL_GROUP_3_SCREEN_WIDTH_MIN: 1280 像素GEL_GROUP_4_SCREEN_WIDTH_MIN: 1440 像素GEL_GROUP_5_SCREEN_WIDTH_MIN: 1920 像素GEL_DESKTOP_SCREEN_WIDTH_MIN: 1280 像素
示例
下面是一个示例代码，展示了如何使用 @bbc/gel-foundations-styled-components 来创建带有响应式间距的组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- --------------------
------ - ----------------- --------------- - ---- -----------------------------------
------ - ---------------------------- - ---- --------------------------------
----- ------- - -----------
------- ------------------ --
------ ------ --- ----------- -------------------------------- -
------- ------------------- --
-
--
----- ---- - ---------
---------- -----
------------ -----
------ -----
--
----- ---------------- - -- -- -
------ -
---------
-----------------
----------
--
--
------ ------- -----------------结论
使用 @bbc/gel-foundations-styled-components 可以让开发者在前端项目中使用 BBC 设计系统 GEL 的样式。预设变量方便快速开发，并且有不同屏幕尺寸的响应式样式。当然，使用自定义样式时要确保遵循组织的样式规范，保证整体页面的一致性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d030d092702382297d