首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Storybook -如何使用样式化组件(React + TS)从外部项目导入组件?

Storybook是一个用于开发、测试和演示React组件的工具。它提供了一个独立的环境,可以在其中以交互的方式浏览和测试组件。

要从外部项目导入组件并在Storybook中使用样式化组件,可以按照以下步骤进行操作:

  1. 确保你的外部项目是一个独立的React组件库,并且已经安装了Storybook。
  2. 在Storybook的配置文件(通常是.storybook/main.js或.storybook/config.js)中,添加一个webpack配置,以允许导入外部项目的组件。例如:
代码语言:txt
复制
module.exports = {
  // ...
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('babel-loader'),
          options: {
            presets: [require.resolve('babel-preset-react-app')],
          },
        },
        require.resolve('react-docgen-typescript-loader'),
      ],
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  },
};
  1. 在Storybook的stories目录中,创建一个新的.story文件(例如MyComponent.stories.tsx),用于编写组件的Storybook故事。
代码语言:txt
复制
import React from 'react';
import { Meta, Story } from '@storybook/react';
import { MyComponent } from 'your-external-project';

export default {
  title: 'Components/MyComponent',
  component: MyComponent,
} as Meta;

const Template: Story = (args) => <MyComponent {...args} />;

export const Default = Template.bind({});
Default.args = {
  // 设置组件的props
};
  1. 在Storybook中运行你的故事,以查看导入的组件和样式化效果。

这样,你就可以从外部项目导入组件并在Storybook中使用样式化组件了。

对于样式化组件的推荐,腾讯云提供了云开发(CloudBase)服务,它是一种无服务器的云开发平台,提供了丰富的云端能力和开发工具,可以帮助开发者快速构建和部署应用。你可以使用云开发来托管你的React组件库,并将其集成到Storybook中。

更多关于腾讯云云开发的信息,请参考:腾讯云云开发

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

零搭建基于reactts组件库(一)项目搭建与封装antd组件

代码使用typescript进行开发。 样式使用less进行开发。 引入antd组件库作为底层原子组件库,并且r-ui.umd.js和r-ui.umd.css包含antd组件代码和样式代码。...依赖的reactreact-dom模块以外部引用方式。 开发与打包工具选型 使用webpack作为打包工具 老牌而又经典的打包工具,广泛的使用,丰富的插件生态以及各种易得的样例。...项目搭建实施 初始 初始r-ui项目 mkdir r-ui && cd r-ui && npm init # 配置项目基本信息(name、version......)...webpack的基于babel-loader的处理流程 讲了这么多,我们的打包工具webpack如何使用babel相关组件处理代码的呢?还记得我们安装过babel-loader吗?...引入React相关库(externals方式) 还记得我们的需求吗? 依赖的reactreact-dom模块以外部引用方式。 什么是外部引用方式?

90131

React使用 Storybook,构建强大的自定义 UI 组件

构建第一个 Storybook 组件 Storybook使用组件驱动开发(CDD)方法来创建UI组件。按照这种方法,您可以模块地构建,基本组件开始,逐步将它们组合成复杂的屏幕和应用程序。...jsx文件: /** @jsxImportSource @emotion/react */ 下面是一个如何根据道具的值将不同的样式应用到React组件的例子。...在我们的Next.js的index.js的头部上方的jsx将呈现一个页面看起来像这样: 上面的例子展示了当故事位于同一个项目中时,如何Storybook导入组件。...然而,如果你需要从外部应用程序的Storybook导入它们,你应该尝试发布一个包含Storybook组件导出的npm包。...这将使您能够跨项目导入它们,但为了简单起见,我们在单个项目中构建了所有内容。 现在我们已经有了一个可以运行的样式组件,让我们直接进入Storybook的特性,它允许你构建漂亮的ui。

9.2K10
  • 构建一套最佳的React 组件文件结构

    本期文章由前端晚自习带来的React组件文件结构将帮助大家构建架构体系。 为前端项目创建适当且可扩展的文件结构可能是具有挑战性的。在使用React这样的非优化工具时,我们拥有很大的自由度。...通常,当我们讨论文件结构时,讨论重点是整个项目。但是,同样重要的(也是经常被忽视的)是如何最好地构造组件的问题。 包含在组件目录中的内容 组件是每个React应用程序的构建块。...这样,以后我就可以同一位置导入这两者。显式重新导出还有助于记录哪些是公开的(并打算由应用程序的其余部分使用)以及该组件的私有内容。...Story Storybook(storybook.js.org)是一款出色的工具,可用于独立开发组件。它使我们能够将我们的组件真正视为独立的微型项目。...出于上述所有相同的原因,将每个story及其相应的组件并置在一起很重要。 Styles 样式文件 使用CSS-in-JS时,可以直接在组件文件中创建样式组件

    1.1K10

    文档开发框架到package.json,带你走一轮React组件库构建与发布

    /tree/demo 2.1 核心方案对比 2.1.1 dumi对比storybook 经过笔者实践,得出一份在React组件库构建时的对比 对比 dumi storybook 国内教程 多 少 安装难度...,因为Next是约定式导入样式文件,仅允许在_app.tsx文件中导入样式 正常项目未配置less-loader无法使用,怎么会有组件库打包继续使用import "xxx.less"这种语法,这本身就是不对的...对于前两者,很遗憾,对于组件库来讲我们并不推荐使用,原因是会给使用者的样式覆盖造成一定的困惹。...当然如果你不想重新走一遍,可以直接拉取https://github.com/GrinZero/magic-design-react/tree/demo 3.1 初始项目 3.1.1 使用dumi脚手架初始项目...踩了多次坑之后,我参考了tdesign-react和antd这两个组件库,发现这两个组件库都是通过直接引入bundle样式来引入组件样式的。

    4K20

    Angular 工具篇之Storybook

    Storybook 是一个 UI 组件的开发环境。它允许你能够浏览一个组件库,查看每个组件的不同状态,以及支持交互式的方式开发和测试组件Storybook 在你的应用程序之外运行。...Storybook 这款工具很强大,它支持很多流行的框架,比如: React React Native Vue Angular Polymer Riot 接下来我们来介绍一下在 Angular 项目如何使用...现在我们使用 Angular CLI 来创建一个新的演示项目: $ ng new angular-storybook-demo $ cd angular-storybook-demo 这里需要注意的是,.../src/stories 目录下自动导入以 *.stories.ts 结尾的文件。当然你也可以指定其它目录加载。通过上面的两个步骤,我们已经完成 Storybook 的初始化工作。...,而在实际的项目中我们的组件可能需要使用 Angular 内置的指令(如 ngIf 或 ngFor)或第三方库的组件

    2K20

    基于 ReactTS的聊天室monorepo实战

    最近在思考如何编写高质量的 React 项目,刚好接到聊天室的需求,于是决定写一篇关于 ReactTS 的实战教程,采用 monorepo+lerna 管理包。...文末抽奖包邮送4本《Vue.js前端开发基础与项目实战》 PS:该教程面向有一定 ReactTS 、Node 经验的前端开发者,通过学习您将获得: UI 组件库搭建 Lerna + monorepo...命令如下: 初始 React+TS 环境 npx create-react-app component --typescript 初始 Storybook cd component npx -p @...npx create-react-app app --typescript 整个聊天室项目采用的是多包管理模式,所以在开发时我们会直接通过 lerna link命令来创建软连接,因此可以不必通过发布包来完成依赖的使用...消息组件设计 虽然项目是基于 Material-UI 开发的,但考虑到业务带来的差异性,组件库可能需要高度定制,故直接采用全量导出的方式来使用基础 UI 组件

    1.8K10

    React组件设计实践总结02 - 组件的组织

    本文章主要探讨在大型项目如何组件进行组织, 让项目具备可维护性. 系列目录 01 类型检查 02 组件的组织 03 样式的管理 04 组件的思维 05 状态管理 目录 1....基本技巧 这些技巧来源于react-bits: 如果组件不需要状态, 则使用无状态组件 性能上比较: 无状态函数 > 有状态函数 > class 组件 最小 props(接口)....,可以让两者更好维护,比如布局变动不会影响内容,内容组件可以被应用不同的布局; 另一方面组件是一个自包含内聚的隔离单元, 不应该影响其外部的状态, 例如一个按钮不应该修改外部的布局, 另外也要避免影响全局的样式...开发者设计一个模块的 API 时, 需要考虑模块各种使用方式, 并使用 index 文件控制模块可见性: // 导入外部模块需要使用的类型 export * from '....文档 组件的文档推荐使用Storybook, 这是一个组件 Playground, 有以下特性 可交互的组件示例 可以用于展示组件的文档.

    1.9K31

    工程角度讨论如何快速构建可靠React组件

    本文并不是要谈如何去写一个 React 组件,这一块已经有不少精彩的文章。...例如像这篇《重新设计 React 组件库》,里面涉及一个组件设计的各方面,如粒度控制、接口设计、数据处理等等(不排除后续也写一篇介绍组件设计理念哈)。 本文关键词是三个,工程、快速和可靠。...要注意的是,你的组件可能含有样式文件,配置命令的时候要记得将样式文件也复制过去,像下面的命令,--copy-files 参数就是为了将样式文件直接拷贝到 dist 目录下。...测试自动 上述讲的都跟如何提升开发效率有关的,即满足 “快速” 这个目标,对 ”可靠“ 有一定帮助,如稳定的流程和良好的代码规范,但并没有非常好地保证组件地稳定可靠。...,一个UI组件,共两个示例,对照着脚手架的文档,目录规范、开发流程、发布都写得较为清楚,大家开发组件的时候,可以根据情况做些调整。

    1.9K60

    你不知道的33个令人惊艳的React开发库

    chakra-ui image.png Chakra UI 是一个简单、模块且可访问的组件库,为您提供构建 React 应用程序所需的构建块。... Material UI(我们完全加载的组件库)开始,或者将您自己的设计系统引入我们的生产就绪组件中。...react-icons image.png 使用react-icons可以轻松地在React项目使用流行的图标,它利用ES6导入,支持按需打包。...react-virtual image.png 仅在 TS/JS、React、Vue、Solid 和 Svelte 中以 60FPS 的速度虚拟大量可滚动元素中的可见 DOM 节点,同时保留对标记和样式的...storybook image.png Storybook 是一个用于独立构建 UI 组件和页面的前端研讨会。成千上万的团队使用它进行 UI 开发、测试和文档编制。它是开源且免费的。

    33220

    3w字长文带你【0开发一个自己的前端组件库】 | 技术创作特训营第五期

    前言 这篇文章0介绍如何开发组件库。.../react-dom/src/hostConfig.ts"] } } } storybook 这里使用storybook来呈现组件库 1.安装storybook npx storybook@latest...init 2.改造项目storybook初始项目结构改造成这样的结构 改造前: 改造后: 样式 使用scss来编写样式代码 样式结构我们采用如下的结构: _variables.scss:各种变量以及可配置设置..."reboot"; 引入样式文件 在.storybook中引入 // .storybook/preview.ts import type { Preview } from "@storybook/react...先登录npm npm publish 部署完成 使用chromatic+storybook完成部署 点击查看组件库效果 结尾 这篇文章0搭建了一个前端组件库,其中只开发了Button组件,其余的组件大家可以自行开发

    86051

    零搭建reactts组件库(二)less模块与svg引入配置

    在上一篇《零搭建react+ts组件库(一)项目搭建与封装antd组件》介绍了使用webpack来搭建一个基于antd的组件库的基本框架,但是作为一个组件库,实际上还有很多的都还未引入,本篇将会补充less...为了讲解如何进行less模块配置以及如何引入svg作为组件库的一部分,我们设想这样一个需求:一个搜索输入框,左侧是一个svg的icon搜索图标,右侧是输入框。.../index.module.less'; 总结一下,想要在ts+babel-loader项目使用样式模块。...中想要使用svg有这很多种方式,像是直接编写react组件,并返回svg代码: import * as React from "react"; const IconSearch = () => {...那么,是否存在这样一种方式: import IconSearch from 'path/to/search.svg' // IconSearch是一个React组件,可以在其他组件使用 个人最常使用的方案是

    65430

    2020年值得你去试试的10个React开发工具

    ”的标签,当你运行本地程序时,你将可以使用React Sight以可视树状的形式查看和创建不同的组件,这将让你能够方便的理解它们的连接方式,在你把鼠标悬停在元素上时,就可以看到它们当前的状态和属性。...Storybook React是为了帮助你以非常直观的方式编写UI而设计的。但必须通过写代码才能创建可视的组件并不是真正自然的事情,这就是为什么我们通常会代码跳到浏览器,然后再回到代码。...Storybook是一个开源工具,它可以用来开发自己的UI组件。它不仅仅只是一个代码库,他们的在线UI编辑器允许你开发、检查并最终以交互的方式展示你的作品(这在开发可视组件时是至关重要的)。 ?...为了将Storybook安装到你现有的React项目中,你所要做的就是: $ npx -p @storybook/cli sb init 该命令将检查你项目的结构,并尝试了解你正在使用的视图层(因为Storybook...为了将其添加到您的项目中,您可以使用 npm $ npm install react-bootstrap bootstrap 准备就绪后,您可以将所需的样式表添加到项目App.js或src/index.js

    7.9K20

    Styleguidist 迁移到 Storybook

    Styleguidist 到 Storybook 的过渡让我们能够为 React 组件提供一个更快、更加友好的开发环境,并更好地协调开发人员和设计人员的工作流程。...在这篇文章中,我们将深入探讨我们是如何以及为什么要迁移到 Storybook。 现   状 Styleguidist 是一个交互式 React 组件开发环境,开发人员用它来开发和查看用户界面。...Styleguidist 还可以用于生成静态文档页面(样式指南),并分享给其他利益相关者。文档是用 Markdown 创建的,带有代码块,这些代码块在一个单独的交互式沙盒中渲染 React 组件。...为了保持现有 React 组件示例并减少开发人员在迁移过程中的负担,我们列出了以下这些需求: 我们现有的 Styleguidist 文件使用了 ES5 风格的导入和语法。...结  论 将 React 组件示例 Styleguidist 迁移到 Storybook 极大地提升了开发者体验和组件性能。

    1.4K20

    使用storybook管理React组件

    本文已React的UI组件为例,演示如何新建/集成Storybook项目中,并对UI组件进行全方位的管理,包括发布、demo文档、测试等。 1....新建一个Storybook React项目 按照官方教程使用npx -p [@storybook](/user/storybook)/cli sb init安装,一直会报错: TypeError: Cannot...register'; // 组件可视配置 @storybook/addon-info插件比较特殊,不需要提前注册,它可以显示story的源码,并针对props提供一些文档。...以一个分页组件为例 团队的stoneUI组件库直接移植过来 将Pagination、IconV组件源码放入components目录; 编写story: import React from 'react...4.4 测试样式 样式测试这里采用Puppeteer 和Jest来实现,其原理是利用Puppeteer的无头的chrome浏览器和storybook的url绑定组件特点,来渲染不同的UI组件,再进行图片快照的对比

    3.4K20

    搬砖 React 4 年,我总结了这些企业级应用的要点

    第一天就优先考虑可维护性和代码质量。实施编码标准,进行代码审查,并投资于自动测试。一个维护良好的代码库不仅更易于使用,也更少 Bug 和回归。...在以下章节中,我们将深入探讨这些原则如何转化为可执行的策略和最佳实践。 文件夹和文件结构 在 React 中,使用经过深思熟虑的文件夹结构组织项目对于维护性和可扩展性至关重要。...它提供了 API 获取数据、缓存和处理变更的统一方式。在企业环境下,应用通常需要与多个 API 和服务进行交互。React Query 可以通过集中数据管理和减少样板代码来简化这个过程。...Storybook 提供了展示和讨论 UI 组件的集中平台,促进高效协作并确保一致的设计语言。这里是一个我使用 Storybook 开发和文档的示例组件库。...使用 TypeScript 发挥优势,用它来约束人们如何使用你的组件。一个很好的例子是我们的 Button 组件。它有两个属性 leftIcon 和 rightIcon。

    52740

    Storybook 7 来了:迄今为止最大的更新

    Hi 大家好我是 ssh,在公司项目中,我们编写组件文档支持都是用的 Storybook,总体来说体验很好,当然我也遇到了一些问题,比如说依赖容易安装失败或编译失败,需要深度配置 webpack 等等...对于SvelteKit来说,这意味着可以自动配置框架特有的设置,比如使用app/paths安全检索资源路径,支持app/stores和特殊的lib导入别名,以及使组件可以访问app/environment...使用 MDX 引用导入 stories Storybook 7 鼓励所有用户在 CSF3 中定义 stories,然后在 MDX 中引用它们。...更容易配置的样式插件 使用 Storybook 设置样式工具对许多开发人员来说是一个常见的挑战。...样式插件使你能够加载和应用全局样式到你的组件上,以及使用主题 Providers 包装 stories。甚至还提供了一个主题切换器,让你轻松切换主题。

    51430

    服务端来自火星,客户端来自金星,RSC 开发新思路

    但是对于服务器组件来说,情况就不再是这样了。 因此,这就引出了一个问题:该如何独立进行服务器端组件的开发和测试呢?...那么,它到底是如何实现的呢? 开始支持异步 如何支持异步组件是在客户端上渲染 RSC 组件的第一个挑战。幸运的是,在 Next.js 最新依赖的 React 版本中已经(非官方地)支持了这一功能。...注意: 这个解决方案目前还不能在其他 Storybook React 框架(例如 react-vite、react-webpack5)中使用,因为它们没有像 Next.js 那样使用 canary 版的...upgrade --prerelease 然后,在项目的.storybook/main.ts 文件中将实验性功能开启: // .storybook/main.js export default {...原文地址: https://storybook.js.org/blog/storybook-react-server-components/ 相关阅读: Styleguidist 迁移到 Storybook

    18710
    领券