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

为什么我的CRA/ Typescript/ Storybook项目中没有应用样式化组件样式?

在CRA/Typescript/Storybook项目中没有应用样式化组件样式的原因可能有以下几点:

  1. 缺少样式化组件库:CRA(Create React App)是一个用于快速搭建React应用的脚手架工具,它并没有默认集成样式化组件库。因此,如果你想在项目中使用样式化组件,你需要手动引入一个适合的组件库,例如Ant Design、Material-UI等。这些组件库提供了一系列预定义的样式化组件,可以帮助你快速构建漂亮的界面。
  2. 缺少样式化组件的引入:即使你已经引入了样式化组件库,但如果没有正确地在项目中使用这些组件,样式将不会生效。在使用样式化组件时,你需要按照组件库的文档说明正确地引入和使用组件,并且遵循组件库的样式规范。
  3. 缺少样式化组件的样式覆盖:有时候,样式化组件的默认样式可能无法满足你的需求,你可能需要对组件的样式进行自定义。在这种情况下,你需要了解组件库提供的样式覆盖机制,并按照文档说明进行相应的样式修改。
  4. 缺少CSS预处理器配置:如果你在项目中使用了CSS预处理器(如Sass、Less),你需要确保正确配置了预处理器的编译和引入规则。否则,预处理器编译后的样式文件可能无法被正确引入到项目中,导致样式无法生效。

综上所述,要在CRA/Typescript/Storybook项目中应用样式化组件样式,你需要确保正确引入样式化组件库,按照文档说明使用组件,并根据需要进行样式覆盖。同时,确保正确配置CSS预处理器(如果使用)以及正确引入编译后的样式文件。

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

相关·内容

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

构建第一个 Storybook 组件 Storybook使用组件驱动开发(CDD)方法来创建UI组件。按照这种方法,您可以模块地构建,从基本组件开始,逐步将它们组合成复杂屏幕和应用程序。...如果你还没有一个React应用来添加Storybook,你可以先通过初始Next.js应用来创建一个。...在React应用中初始Storybook 现在我们已经启动并运行了React应用程序,我们需要安装并设置Storybook本地实例。...现在我们有了无样式组件,让我们用一些CSS给它增添一些风味。 一个CSS对象可以用来动态地在不同变量上应用不同样式。例如,Emotion是一个支持用JavaScript编写CSS对象库。...这将使您能够跨项目导入它们,但为了简单起见,我们在单个项目中构建了所有内容。 现在我们已经有了一个可以运行样式组件,让我们直接进入Storybook特性,它允许你构建漂亮ui。

9.2K10

【React】653- 22 个让 React 开发更高效更有趣工具

以下是工具页面样式: 该应用程序允许我们声明属性及其类型,在树状图中查看组件,导入背景图像,将其定义为有状态或无状态,定义其父组件,放大/缩小,以及将原型导出到一个新或已有的项目中。...我们当中有些人可能不知道如何用 CRA 来创建一个 TypeScript 项目。...我们要做就是在末尾加上 --typescript: npx create-react-app --typescript 这会帮我们省去给 CRA 项目手工添加 TypeScript 麻烦...Storybook 如果大家还不了解 Storybook,并且希望能够轻松地构建 UI 组件强烈建议你立即使用它。...它会扫描项目中组件,并且可以实现以下功能: 用属性、上下文和状态任意组合下渲染组件 模拟每个外部依赖(例如 API 响应、localStorage 等) 与正在运行实例进行交互时,查看应用程序状态实时变化

2.1K20
  • 22 个让 React 开发更高效更有趣工具

    以下是工具页面样式: 该应用程序允许我们声明属性及其类型,在树状图中查看组件,导入背景图像,将其定义为有状态或无状态,定义其父组件,放大/缩小,以及将原型导出到一个新或已有的项目中。...我们当中有些人可能不知道如何用 CRA 来创建一个 TypeScript 项目。...我们要做就是在末尾加上 --typescript: npx create-react-app --typescript 这会帮我们省去给 CRA 项目手工添加 TypeScript 麻烦...Storybook 如果大家还不了解 Storybook,并且希望能够轻松地构建 UI 组件强烈建议你立即使用它。...它会扫描项目中组件,并且可以实现以下功能: 用属性、上下文和状态任意组合下渲染组件 模拟每个外部依赖(例如 API 响应、localStorage 等) 与正在运行实例进行交互时,查看应用程序状态实时变化

    10.3K31

    22 个让 React 开发更高效更有趣工具

    以下是工具页面样式: 该应用程序允许我们声明属性及其类型,在树状图中查看组件,导入背景图像,将其定义为有状态或无状态,定义其父组件,放大/缩小,以及将原型导出到一个新或已有的项目中。...我们当中有些人可能不知道如何用 CRA 来创建一个 TypeScript 项目。...我们要做就是在末尾加上 --typescript: npx create-react-app --typescript 这会帮我们省去给 CRA 项目手工添加 TypeScript 麻烦...Storybook 如果大家还不了解 Storybook,并且希望能够轻松地构建 UI 组件强烈建议你立即使用它。...它会扫描项目中组件,并且可以实现以下功能: 用属性、上下文和状态任意组合下渲染组件 模拟每个外部依赖(例如 API 响应、localStorage 等) 与正在运行实例进行交互时,查看应用程序状态实时变化

    2.1K31

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

    Hi 大家好是 ssh,在公司项目中,我们编写组件文档支持都是用 Storybook,总体来说体验很好,当然也遇到了一些问题,比如说依赖容易安装失败或编译失败,需要深度配置 webpack 等等...看起来好像解决了很多在使用过程中痛点,下面来和大家一起分享 Storybook 7.0 - Next-level component development and testing: 正文 Storybook...从那时起,我们开创了组件驱动开发、文档和测试 UI 工作环境概念。 在此期间,前端生态系统发生了巨大变化。IE11 终于退出了舞台。TypeScript 正在迅速占领 JavaScript 领域。...更容易配置样式插件 使用 Storybook 设置样式工具对许多开发人员来说是一个常见挑战。...样式插件使你能够加载和应用全局样式到你组件上,以及使用主题 Providers 包装 stories。甚至还提供了一个主题切换器,让你轻松切换主题。

    50830

    2019年,React 开发者应该掌握 22 种神奇工具

    我们当中有些人可能不知道如何用 CRA 来创建一个 TypeScript 项目。...我们要做就是在末尾加上 typescript: npx create-react-app --typescript 这会帮我们省去给 CRA 项目手工添加 TypeScript 麻烦。...Storybook 如果你还不了解 Storybook(https://storybook.js.org/),并且希望能够轻松地构建 UI 组件强烈建议你立即使用它。...它会扫描项目中组件,并且可以实现以下功能: 用属性、上下文和状态任意组合下渲染组件 模拟每个外部依赖(例如 API 响应、localStorage 等) 与正在运行实例进行交互时,查看应用程序状态实时变化...不确定为什么提到这个网站的人不多,但在这个页面发现了几乎所有需要信息,它快捷、方便,并不断更新,总是能为所有的项目提供所需结果。

    2.4K21

    21个让React 开发更高效更有趣工具

    为了保证可读性,本文采用意译而非直译。 下列工具中重要性与排序无关。 1.Webpack Bundle Analyzer 有没有想过你应用程序哪些包或哪部分代码所占总大小多少?...还有什么比 npx create-react-app 更简单呢 咱们还有些人可能不知道是如何使用CRA创建TypeScript项目,这个也很简单,只需要在末尾添加--typescript...即可: npx create-react-app — typescript 这样可以省去手动将TypeScript添加到CRA创建项目中麻烦。...Storybook Storybook 是一个轻松地构建UI组件库。该工具启动一个实时开发服务器,支持开箱即用热重载,你可以在其中独立地实时开发React组件。 这足以作为普通文档页面: 11....React Sight 你有没有想过你应用程序在流程图中样子? React Sight允许你通过展示整个应用程序实时组件层次结构树来可视React应用程序。

    2.4K30

    2022 年 React 生态

    建议: 优先使用 Vite 创建 React 客户端应用 CRA 备选 优先使用 Next.js 创建 React 服务端渲染应用 最新技术:Remix 仅创建静态站点备选 Gatsby.js 可选学习经验...但是,如果你在没有框架情况下使用 React 并且仅用于客户端渲染(例如 CRA),那么现在最强大和流行路由库是 React Router。...JavaScript 动态添加样式,而外部 CSS 文件可以包含 React 应用所有剩余样式: import '....首先,建议你将 CSS Module 作为众多 CSS-in-CSS 解决方案首选。CRA 支持 CSS Module ,并为提供了一种将 CSS 封装到组件范围内模块方法。...这样,它就不会意外泄露到其他 React 组件样式中。你应用某些部分仍然可以共享样式,但其他部分不必访问它。

    5.8K20

    21个让React 开发更高效更有趣工具

    1.Webpack Bundle Analyzer 有没有想过你应用程序哪些包或哪部分代码所占总大小多少? Webpack Bundle Analyzer可以帮助咱们分析。...还有什么比 npx create-react-app 更简单呢 咱们还有些人可能不知道是如何使用CRA创建TypeScript项目,这个也很简单,只需要在末尾添加--typescript...即可: npx create-react-app — typescript 这样可以省去手动将TypeScript添加到CRA创建项目中麻烦。...Storybook Storybook 是一个轻松地构建UI组件库。该工具启动一个实时开发服务器,支持开箱即用热重载,你可以在其中独立地实时开发React组件。 这足以作为普通文档页面: ?...React Sight 你有没有想过你应用程序在流程图中样子? React Sight允许你通过展示整个应用程序实时组件层次结构树来可视React应用程序。

    98520

    类型即正义:TypeScript 从入门到实践(序章)

    初始应用 初始一个 React 应用最佳方式那么一定是 React 官方维护 Create React App[15] 脚手架了,我们打开终端,运行如下命令来初始一个 TypeScript 版本...成功创建一个 TypeScript 版本 React 应用! 提示在下文中,为了简化语言,我们统一称 TypeScript 为 TS。...,但是为了更好定制样式和按需引用以减小打包之后包体积,我们还需要做一点定制操作,打开命令行,依次安装如下依赖: $ npm install react-app-rewired customize-cra...loader,因为 antd 使用 less 作为样式语言。...上面的代码主要就是一系列初始数据准备,antd 组件使用,编写起来大致轮廓,还没有涉及到任何 TS 语法,但这个是我们开始项目的基础,读者只需要进行简单复制放进现有的 typescript-tea

    1.5K20

    React教程:组件,Hooks和性能

    首先使用 Create React App(CRA)初始一个新项目,然后开始开发。不过遗憾是,随着时间推移,代码可能会变得难以维护,特别是在你不熟悉 React 情况下。...这就是为什么 React 中会有错误边界。那他们是怎么工作呢? 如果出现问题并且没有错误边界作为其父级,则会导致整个React 应用失败。...就像 TypeScript 一样,CRA(创建React App)从一开始就支持 Flow。 发现 TypeScript 更快(几乎是即时),特别是在自动完成中,Flow 似乎有点慢。...上述步骤会使你应用没有来自 React 检查和警告情况下运行,并且 bundle 本身也将被最小。 你还可以为 React 应用做更多事。你如何处理构建 JS 文件?...对来说,这是一伟大技术,在过去几年中发生了很大变化。

    2.6K30

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

    包括以下内容: 为什么大厂都要建设自己组件组件设计理论 组件开发顺序 环境搭建 storybook 样式处理 Button组件开发 单元测试 本地测试 打包 发布 为什么大厂都要建设自己组件库...组件库名称是叫:curry-design 首先去 npm 仓库查找curry-design,看有没有人在使用。。 https://www.npmjs.com/search?...q=curry-design 从结果可以看到,这个名字没有其他包在用,所以我可以使用这个名字作为组件包名。 如果你起名字,在npm里面查询到,则需要换个名字。...init 2.改造项目 将storybook初始项目结构改造成这样结构 改造前: 改造后: 样式 使用scss来编写样式代码 样式结构我们采用如下结构: _variables.scss:各种变量以及可配置设置...,所以我们做组件库也需要设置色彩系统样式,因为我们使用是scss,所以我们可以将这些系统样式颜色通过变量来定义,方便复用。

    84751

    Sentry 开发者贡献指南 - 前端(ReactJS生态)

    最好样式是您不编写样式 - 尽可能使用现有组件。 新代码应该使用 css-in-js 库 e m o t i o n - 它允许您将样式绑定到元素而无需全局选择器间接性。...Typescript Typing DefaultProps 迁移指南 Grid-Emotion Storybook Styleguide 引用其文档,“Storybook 是用于 UI 组件 UI...有了它,您可以可视 UI 组件不同状态并以交互方式开发它们。” 更多细节在这里: https://storybook.js.org/ 我们使用它吗? 是的!...useEffect hook 更复杂,您需要小心地跟踪您依赖并确保通过清理回调取消订阅。...,请确保通过该组件代码库进行 grep 以确保它没有被渲染为特定于 grid-emotion 附加属性。

    6.9K30

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

    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...Proton Native 最后,对于最后一个工具,想介绍一种使用React来创建桌面应用程序方法,因为毕竟,像Electron这样项目,用JavaScript做这件事已经有一段时间了。

    7.9K20

    2020 年你应该知道 React 库

    React 社区现状是通过 Facebook create-react-app(CRA)。它提供了一个零配置设置,并给你一个开箱即用并且简单启动和运行 React 应用程序。...一个流行 Airbnb 开源React style guide 。即使你没有刻意遵循这些样式指南,但是读一读它们,在 React 中获得常见代码样式要点是有意义。...React 中最常用 JavaScript 内置功能之一是内置 map() 数组。为什么?因为您总是必须呈现组件列表。...,只能想到以下内容,因为没有在 React 中使用任何其他内容: Draft.js Slate React 中支付 和其他网络应用一样,最常见支付提供商是 Stripe 和 PayPal。...已经广泛地使用了 Storybook可以说他非常好用,但是也听说了其他解决方案好处: Styleguidist docz Docusaurus 总结 所以最终,React 生态系统可以看作是一个

    14.4K40

    想给组件加上文档? 试试 Storybook

    大家平时都在写组件,当你写组件库里组件,或者项目里一些公共组件时候,是需要提供文档。 这时候我们一般都会用 StorybookStorybook 是非常流行用来构建组件文档工具。...我们试一下就知道了: npx create-react-app --template typescript sb-test 用 cra 创建个 react 项目。...然后进入项目,执行 storybook 初始: npx storybook@latest init 打印日志告诉你 storybook init 是在你项目里添加 storybook 最简单方式...这三个组件不是我们自己写,是 storybook 初始时候自带了三个 demo 组件。 我们可以用它来了解下 storybook 功能。...: 这样,组件没有通过测试用例,打开一看就知道了。

    36210

    使用storybook管理React组件

    本文已ReactUI组件为例,演示如何新建/集成Storybook到项目中,并对UI组件进行全方位管理,包括发布、demo文档、测试等。 1....create property 'dependencies' on boolean 'false' 采用是手动创建方式 首先在React项目中手动添加@storybook/react和babel...4.4 测试样式 样式测试这里采用Puppeteer 和Jest来实现,其原理是利用Puppeteer无头chrome浏览器和storybookurl绑定组件特点,来渲染不同UI组件,再进行图片快照对比...4.5 手动测试 再好自动测试,都和人体验存在差距,所以发布之前还是需要经过人眼测试,因为storybook活文档特点,我们可以直接运行体验UI组件,通过交互操作、knobs插件等来进行全面体验...写在最后 本文是作者学习storybook一些总结,总体感觉是接入成本不算高,但是模块包版本安装可能会有一些坑,但收获是给组件管理、文档和测试提供了一个一体解决方案,还是很值得

    3.4K20

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

    模块组件 原则:分而治之 在庞大企业级应用领域,代码可以迅速变成一头难以驯服野兽。拥抱模块组件,将你前端拆分成可管理部件。把组件想象为乐高积木,每个都服务于特定目的。...实施编码标准,进行代码审查,并投资于自动测试。一个维护良好代码库不仅更易于使用,也更少 Bug 和回归。最近在工作中开发了一个组件库和一个基本风格指南来规范我们前端应用。...Cypress 是迄今为止最喜欢工具。每当我测试通过时,这能让确信我引入代码没有破坏应用。随着企业应用发展,进行回归测试以捕获任何新代码变更意外副作用至关重要。...Storybook 提供了展示和讨论 UI 组件集中平台,促进高效协作并确保一致设计语言。这里是一个使用 Storybook 开发和文档示例组件库。...使用开发 Button 组件约定,也是尝试在所有组件上遵循约定。 关键要点 采用某种设计系统,无论是开源解决方案还是你自己启动。 充分利用 TypeScript

    52640

    手摸手教你用 Storybook 改善组件开发

    本篇内容就是尝试优化这部分开发体验,用业界成熟解决方案 Storybook 解决组件统一展示和事实调试。...更快更强构建 UI 组件 Storybook 是一个为开发独立 React、Vue 和 Angular UI 组件开源工具。...高效有序地构建炫酷用户界面 以上是官网开宗明义介绍,总之在 React 等领域,Storybook 已经很好证明了自己,引入这个工具以后,即便是在普通目中,也能帮助开发者逐渐打理出各种低耦合可复用组件...为了正确解析 Vue 单文件组件样式部分,修改设置: // .storybook/webpack.config.js const path = require('path'); module.exports.../preview-head.html 中引入必要样式等,项目中类似工作可能是在 index.html 等处完成: <link rel="stylesheet" href="//foo/bar/index.css

    1.9K10
    领券