简介
在 Web 开发中,样式组件是一个非常重要的部分。styled-components 是一个 React.js 的样式库,允许你编写真正的 CSS 独立组件。而 Storybook 是一个 UI 开发环境,允许开发者在调试输出修改样式组件时查看它们在各种状态下的效果。而 storybook-styled-components 提供了结合这两个库的使用方案。
这篇文章将教你如何在使用 React.js 和 styled-components 时,使用 storybook-styled-components。
安装
--- ------- ---------------------------
设置
首先,我们需要创建一个 .storybook
目录,它应该包含一个名为 config.js
的文件。
添加配置信息
在 config.js
文件中,添加以下代码:
------ - --------- - ---- ------------------- ------------ -- - ----------------------------------- -- --------
创建 stories 文件夹
创建一个文件夹 src/stories
,所有组件故事都应该位于该文件夹中。我们也需要在该文件夹中新建一个 index.js
文件。
Storybook 应该在我们的应用代码之前加载 styled-components
为此,我们需要在 .storybook/config.js
中添加以下代码:
------ - --------- - ---- ------------------- ------ - ------------- - ---- -------------------- ----- ----- - - -- ----- --- - ------------------------- ----- ------------------ -------- ------------- - --------------------------- -- --------------- - ---------------------- --------
上述代码中,我们使用 ThemeProvider
从 styled-components 中获取主题配置属性,并将其传递到根级别组件中。
修改 webpack 配置
Storybook 默认使用 webpack 4 构建,而 styled-components 的缓存机制是通过 babel-plugin-styled-components 插件实现的。因此,我们应该修改 .storybook/webpack.config.js
文件,以用 babel-plugin-styled-components 插件排除掉编译过程中的 styled-components 缓存。
-------------- - --------------------- ----------- -- - -------------------------------- - - - ----- ---------- ---- - ------- --------------- -------- - -------- ----------------------------------- -------- -------- - -------- ----- --- -------- - -- -------- ----------------- -- -- ------ -------------------- --
添加样式
参考 styled-components 的官方文档,我们可以定义全局样式。
------ - ----------------- - ---- -------------------- ----- ----------- - ------------------ ---- - ------- -- -------- -- ------------ ----------- - -- ----- ------------ - -- -------- -- -- - -- ------------ -- ---------- --- -- ------ ------- -------------
编写故事
在 src/stories
文件夹中创建故事文件,如 Button.stories.js
。每个故事文件应该返回一个包含我们要测试的组件的导出列表。
------ ----- ---- -------- ------ - --------- - ---- ------------------- ------ ------ ---- ----------------------- ------------------- ------- ---------- ------ -- -- ------------- --------------- ---------- ------- -- -- ---------- -- -- -------------
示例代码
styled.d.ts
------ -------------------- ------- ------ ------------------- - ------ --------- ------------ - ------------- ------- --------------- ------- - -
ThemeWrapper.tsx
------ - ------------------ ------------- - ---- -------------------- ------ - ------------ - ---- -------------------- ------- ------ ------------------- - ------ --------- ------------ - -------------- ------- ---------------- ------- - - ----- ----------- - ------------------ ---- - ------- -- -------- -- ------------ ----------- - -- ----- ---------- ------------ - - ------------- ------- --------------- ------ -- ----- ----------- ------------ - - ------------- ------- --------------- ------ -- ----- ------------- ---------- ----------- ------- -- - -- --------- ---------- - ----- -- -- - ----- ----- - ---------- - --------- - ----------- ------ - -------------- -------------- ------------ -- ---------- ---------------- -- -- ------ ------- -------------
Button.tsx
------ ------ ---- -------------------- ----- ------ - -------------- ----------- --------- -- -------------- - ------------------------ - --------- ------ --------- -- -------------- - ------- - ---------- ---------- ---- ------- ---- -------- ------ ---- ------- --- ----- --------- -- -------------- - ------------------------ - --------- -------------- ---- -- ------ ------- -------
Button.stories.tsx
------ ----- ---- -------- ------ - --------- - ---- ------------------- ------ ------ ---- ----------------------- ------ ------------ ---- ----------------------------- ------------------- ------- --------------------- -- --------------------------------------- ------------- -------- -- -- ------- --------------- ---------------- --------------- -------- -- -- ----------------- -----------------
结论
使用 storybook-styled-components 能够方便我们进行组件的 UI 测试,特别是在 React.js 和 styled-components 中使用,提高了样式组件的开发效率,减少了出现错误的风险。如果你正在使用 Storybook/React 的组合,请试试 storybook-styled-components,它会帮助你更快地开发 UI 组件并预测问题。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/storybook-styled-components