开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Style material-使用@emotion/styled的ui工具提示

@emotion/styled是一个基于Emotion库的React组件样式化工具。它允许我们使用CSS-in-JS的方式来编写样式，并通过创建可重用的样式化组件来管理UI元素的外观。

@emotion/styled的主要优势包括：

基于JavaScript - @emotion/styled允许我们在组件代码中使用JavaScript来编写样式，使得样式与组件代码紧密集成，提供更好的可维护性和可重用性。
组件级别的样式化 - @emotion/styled支持创建组件级别的样式化，我们可以将组件与其样式紧密耦合，使得组件的样式与行为更加一致。
动态样式 - @emotion/styled支持通过props传递动态样式，可以根据组件的状态或传入的属性值来动态改变样式，实现更灵活的UI定制。
CSS功能支持 - @emotion/styled内置了对CSS的许多功能的支持，如媒体查询、伪类选择器、嵌套规则等，可以满足各种复杂样式需求。
性能优化 - @emotion/styled通过将样式转换为具有唯一类名的内联样式，避免了样式冲突的问题，并且能够实现更高的性能。

应用场景： @emotion/styled适用于任何需要在React应用中进行组件样式化的场景，特别适用于构建复杂的UI组件库、单页面应用或移动应用。

推荐的腾讯云相关产品：

云服务器（CVM）- 提供高性能、安全可靠的云服务器，用于部署和运行React应用。详情请见：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CDB）- 提供稳定可靠的关系型数据库服务，用于存储应用程序所需的数据。详情请见：https://cloud.tencent.com/product/cdb_mysql
云原生容器服务（TKE）- 提供可弹性伸缩、高可用的容器集群管理服务，适用于部署和管理React应用的容器化环境。详情请见：https://cloud.tencent.com/product/tke

相关搜索:在引导工具提示中使用style='‘无法使用@emotion/styled访问样式化组件中的主题材质UI工具提示的stopPropagation 如何使用material ui react中的“styled”WPF/XAML -使用'Style‘创建带有模型元素名称的工具提示如何修改工具提示组件的font-size/style？用于模拟AutoHotKey工具提示UI的Python react js中的流畅ui工具提示 WIX Installer UI:图标/位图的工具提示 material-使用Autocomplete的ui，带有diff值，选项类型带有工具提示的语义UI按钮加载状态包含Material-UI中内容的工具提示使用Material UI工具提示测试组件时出现动作警告 Vue + Element UI:如何在表中使用动态工具提示显示不需要的动画的Material ui工具提示使用v列表的工具提示创建根据表行变化的元素UI工具提示内容使用d3的工具提示-提示不显示使用Angular ComponentFactory的工具提示工件简化验证工具提示的使用

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jQuery Tooltip

jQuery Tooltip 插件取代了原生的工具提示框，让它们可自定义，您只需要调整它们的内容、位置和外观即可。

04

6个常用的React组件库

本文最初发布于 maxrozen.com 网站，经原作者授权由 InfoQ 中文站翻译并分享。

01

Setting Up a Dev Environment with React, Vite, TypeScript, Material-UI and TailwindCSS

# Step by Step Guide Create Project Folder pnpm create vite@latest cellinlab-home -- --template react-ts cd cellinlab-home Install Tailwind CSS and Other Dependencies pnpm install -D tailwindcss postcss autoprefixer Generate Tailwind CSS Config File pnpx

01

2022 年的 React 生态

今天我们来聊 React，React 已经风靡前端届很长一段时间了，在这段时间里它发展了一个非常全面而强大的生态系统。大厂喜欢在大型的前端项目中选择 React，它的生态功不可没。

02

32K star 的 Chakra UI，以及未来的展望

Hi，我是 ssh，最近一段时间，经常听说 Chakra UI 这个库，虽然没有在公司的项目里用过，但是从我短暂的了解来说，感觉是个兼顾优雅和实用的 UI 组件库，最近 Chakra UI 的作者 Segun Adebayo 发表了一篇文章，讲述了他对这个库未来的一些展望，给了我很多启发，接下来我给大家分享一下他的这篇The future of Chakra UI

03

34K Star 的UI库，超神了！

虽然了不起没有在公司项目中用到这个三方库，但也看到不少项目在使用，简单看了下Chakra UI 确实也是个实用且美观的一个 UI 组件库。

03

有哪些值得学习的大型 React 开源项目？

之前有很多小伙伴问过我，通过文档或者视频学习 React 已经有一段时间了，想学习一些好的开源项目来获得一些实战经验。我之前也没有很好的答案，确实很难找，因为一般企业级应用都是不开源的，Github 上大部分都是很简单的 DEMO 项目，很难挑选。

02

聊一聊 2024 年 React 生态系统

对于初学 React 的开发者，首先要面临的问题就是如何搭建一个 React 项目。市面上的工具众多，目前最受 React 社区欢迎的是 Vite。Vite 不仅支持多种库（如 React）与TypeScript 的结合使用，还具备出色的性能。

01

React 学习路线图 2018版

这个 React 学习路线的思维导图来源自 Adam Gołąb 的 react-developer-roadmap 。截止至本文发布时，原仓库已经有了中文版，大家可自行选择查阅，由于是 roadmap 的聚合类列表，所以翻译方面差异不会很大。

04

技术天地 | CSS-in-JS：一个充满争议的技术方案

为了解决传统CSS在现代前端应用开发中遇到的痛点，FreeWheel评估了大量新一代的CSS框架/工具/方案。在本文中，作者以评估过程为线索，介绍了CSS-in-JS的背景、现状、开发特点和趋势。

04

5件您可能不知道可以使用 CSS-in-JS 来做的事情

原文链接：5 things you can do in CSS-in-JS that you didn't know about

01

科普 | 一文详解 CSS-in-JS

几年前，如果有人提到用 JavaScript 编写 HTML 作为构建大型网站的一种方式，很多开发者会当这作不可理喻的想法，但是现在，使用 React、Vue 和 Angular 框架为组件开发的应用正在慢慢替代传统的 Web 开发。

02

回望过去，展望未来- 2024 React 生态一览表

React 最初是由 Facebook（Meta）内部开发的，然后于 2013 年 5 月 29 日在 Facebook 的 F8 开发者会议上首次公开宣布，并「于同一天开源发布」。不知不觉中，React已经开源 10 年了。

01

5件你可能不知道可以使用 CSS-in-JS 来做的事情

除了传统的 CSS，你还可以使用内联样式和 CSS-in-JS 作为 React 应用程序的样式选项。

03

React-组件-CSS-In-JS

React组件CSS-in-JS是一种流行的前端开发技术，它将组件的JavaScript逻辑与样式定义结合在一起，以提高代码的可维护性和可重用性。通过CSS-in-JS，开发者可以在组件级别轻松管理样式，而不必担心全局污染或类名冲突。

01

再见，CSS-in-JS

大家好，我 ssh。在过去的开发中，我一直在用 styled-component 库作为 CSS 的解决方案。它有很多优点，灵活、可复用性强、功能强大、可以接受动态 JS 变量传入组件等等…… 但今天我看到一篇文章，说都是 Spot 团队的人已经决定抛弃 CSS-in-JS 的方案了，因为对他们来说，性能损耗已经远远超过其灵活性的优势了。接下来，我来和大家分享一下这篇Why We're Breaking Up with CSS-in-JS

05

React组件设计实践总结03 - 样式的管理

CSS 是前端开发的重要组成部分，但是它并不完美，本文主要探讨 React 样式管理方面的一些解决方案，目的是实现样式的高度可定制化, 让大型项目的样式代码更容易维护.

02

前端框架与库 - Material-UI组件库

Material-UI 是一个基于 React 的 UI 组件库，它遵循 Google 的 Material Design 设计规范，提供了丰富的预构建组件，极大地简化了前端开发过程。本文将深入浅出地介绍 Material-UI 的常见问题、易错点及如何避免这些问题，并附带代码示例，帮助你更好地掌握 Material-UI 的使用技巧。

01

前端框架与库 - Material-UI组件库

Material-UI 是一个基于 React 的 UI 组件库，它遵循 Google 的 Material Design 设计规范，提供了丰富的预构建组件，极大地简化了前端开发过程。本文将深入浅出地介绍 Material-UI 的常见问题、易错点及如何避免这些问题，并附带代码示例，帮助你更好地掌握 Material-UI 的使用技巧。

00

react的css

与传统 html 标签类属性不同，react 中 class 必须编写为 className，比如

01

Emotion库维护者解释为什么Spot公司不再使用运行时CSS-in-JS

Sam Magura 是 Spot 的软件工程师，也是活跃的 Emotion 库维护者。最近，他详细解释了 Spot 公司为什么放弃运行时 CSS-in-JS 库 Emotion，而选择了 Sass 模块——运行时开销、负载开销和服务器端渲染问题导致了较差的用户体验。

02

AngularDart Material Design 工具提示顶

工具提示卡的目标可以是任何元素，例如按钮，输入，链接等。目标也可以是help_outline图标，其充当实际目标的代理。

02

如何在 React 中快速实现暗黑模式

暗黑模式已成为许多应用程序和网站的最基本功能，因为它可以带来非常好的用户体验。因此在项目中实现暗模式是一项非常有用的技能，使用 ReactJS 和 Chakra UI 可以轻松实现暗模式。

03

C# WPF MVVM项目实战(进阶①)

这篇文章还是在之前用Caliburn.Micro搭建好的框架上继续做的开发，今天主要是增加了一个用户窗体TestFormView，然后通过TabControl，将新增的窗体加载到主界面上进行分页显示，新增的页面引用了

02

前端-在2018年你应该知道的9个关于CSS组件化的JS库

一个特别有趣的概念是在CSS中使用JS将CSS抽象到组件级别本身，使用JavaScript以声明性和可维护的方式描述样式。所以，我们已经列出了一些有用的项目来开始。

04

Facebook 重构：抛弃 Sass / Less ，迎接原子化 CSS 时代

随着 Facebook 和 Twitter 最近的产品部署，我认为一个新的趋势正在缓慢增长:Atomic CSS-in-JS。

01

Facebook 重构：抛弃 Sass \u002F Less ，迎接原子化 CSS 时代

主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

05

这四种最最常见的按钮类型，设计师必须掌握

按钮可能是现代图形用户界面中最常见的功能元素。尽管它很受欢迎并且很简单，但这个 UI 对象可能很难设计。

01

JavaScript图表的数据可视化:比较D3和Kendo UI

D3和Kendo UI只是在web应用程序中创建图表的两种方式，选项范围从简单地在屏幕上绘制图形到使用复杂的图表组件。D3和Kendo UI都很受欢迎，两者都能完成工作。然而，相似之处到此为止，这两种方法代表了非常不同的方法，具有非常不同的特性。

03

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

本指南涵盖了我们如何在 Sentry 编写前端代码，并特别关注 Sentry 和 Getsentry 代码库。它假设您使用的是 eslint-config-sentry 概述的 eslint 规则；因此，这里不会讨论由这些 linting 规则强制执行的代码风格。

03

为什么和 CSS-in-JS 说拜拜

本文是由 Emotion 的第二大活跃维护者 Sam 分享，本文第一人称都指的是 Sam。Emotion 是一个广泛流行的 CSS-in-JS 库，用于React。文文章 Sam 会带大家深入探讨 CSS-in-JS 最初吸引人的原因，以及为什么作者（以及Spot团队的其他成员）决定放弃它。

02

Gatsby中怎么使用emotion？

用 JavaScript 语法来写 css，主要用于两个框架：agnostic 和 React。下面是用于 React 框架的简单示例：

04

React 应用架构实战 0x2：构建和文档化组件

在 React 中，所有的东西都是组件。这种范式允许我们将用户界面拆分成更小的部分，从而更容易开发应用程序。它还启用了组件的可重用性，因为我们可以在多个地方重复使用相同的组件。

01

[技术地图]

在React 组件设计实践总结 03 - 样式的管理一文中吹了一波 styled-components 后，本文想深入来了解一下 styled-components 的原理. 如果你对 styled-components 还不了解，建议先阅读一下官方文档或前面的文章.

02

分享一篇关于如何使用BootstrapVue的入门指南

BootstrapVue是一个流行的开源前端框架，它结合了Bootstrap（一个前端UI框架）和vue.js（一个渐进式JavaScript框架），用于创建可重用的UI组件和Web应用程序。

03

2020 年你应该知道的 React 库

React 已经诞生很久了，自从它诞生开始，围绕组件驱动形成了一个非常全面的生态，但是来自其他编程语言或者框架的开发人员很难找到要构建一个 React 系统的所有组件。如果你是来自于像 Angular 这样的框架的开发者，你可能已经习惯了框架包含了所需要的所有功能，

04

在React项目中使用CSS Module

就在前几天，写了一篇CSS 20大酷刑,然后看后台数据，反馈还是挺好的，看来大家还是对这个「最熟悉的陌生人」，有种「食之无味，弃之可惜」的感觉。在上篇中，我们就说过，由于CSS庞杂的体系和令人眼花缭乱的属性，总是让人「望而却步」。但是，它也是我们翻身农奴做主人，势必要翻过的四座大山之一 CSS/Html/JavaScript/WebAsssembly。(自认为，WebAssembly也会成为一座我们需要逾越的大山，有关它的介绍，可以看我们之前写的浏览器第四种语言-WebAssembly)

05

爬虫+反爬虫+js代码混淆

那么笔者在这里，给大家分享在 Jetbrains Developer Tools 中，提高工作效率的插件:

03

现代 Web 开发者问卷调查报告

前些日子在 GMTC 北京 2021 技术大会上分享的《字节跳动的现代 Web 开发实践》，介绍了「现代 Web 开发」这场「范式转移」，在字节跳动如何转化成具体的技术栈和研发体系，在内部广泛落地和从中获益。分享中也预告了开源项目 Modern.js、发布了「现代 Web 开发者问卷调查」。截止 8 月 20 日，已经收到了「612」份有效回复，在汇总和交叉对比之后，可以看到很多跟「现代 Web 开发」有关的结果：

04

React | 借助Pragmatic Drag and Drop实现高性能拖拽

Pragmatic Drag and Drop正如名字一样是一个拖放库。因为使用的是浏览器支持的原拖拽功能，并且极小的核心包（不到5kb），在近期迅速火起来。所以今天来结合React快速实现结合一下。

04

CSS in JS的好与坏

CSS-in-JS是一种技术（technique），而不是一个具体的库实现（library）。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些 .css， .scss或者 less之类的文件，这样你就可以在CSS中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。值得一提的是，虽然CSS-in-JS不是一种很新的技术，可是它在国内普及度好像并不是很高，它当初的出现是因为一些 component-based的Web框架（例如React，Vue和Angular）的逐渐流行，使得开发者也想将组件的CSS样式也一块封装到组件中去以解决原生CSS写法的一系列问题。还有就是CSS-in-JS在React社区的热度是最高的，这是因为React本身不会管用户怎么去为组件定义样式的问题，而Vue和Angular都有属于框架自己的一套定义样式的方案。

01

2023 React 生态系统，以及我的一些吐槽……

最近外网有人总结了一篇文章 2023 的 React 生态系统，列出了 React 整个生态系统中比较火热的库。可惜的是他仅仅列出了名字，没有继续深入介绍，我知道读者们有很多小懒蛋，那我就花点时间收集一些重点框架的详细介绍，如果我有一些看法（吐槽），我也会在下面的引用部分进行一些评价。

03

Flutte部件目录-Material Components 顶

底部导航栏可轻松浏览并在单次点击之间在顶层视图之间切换。 BottomNavigationBar小部件实现此组件。

04

【React】：CSS 模块化

以下是 CSS Guidelines 中的一个示例，这个示例展示了一个问题：除了写这段代码的人，没有人知道这段代码是干什么的。

02

一段神奇的监视 DOM 的代码[每日前端夜话0xE4]

通过使用此模块，只需将鼠标悬停在浏览器中，即可快速查看DOM元素的属性。基本上它是一个即时检查器。

01

《模块化系列》snowpack，提高10倍打包速度。

前几天听一个朋友说到 snowpack, 便去去看了下这个包是干什么的，看了下官网，发现这个东西还是蛮有意思的。号称无需打包工具（Webpack，Parcel）便能将代码结果实时展现在浏览器中。可以先看以下的图，是不是很诱人？

02

Panda CSS 确实很适合用来写UI库（CSS-in-JS）

在Github扒了一下作者发现 PandaCSS 其实在2023 年 3 月 Segun Adebayo 发布的《Chakra UI的未来》一文中有提到过，只不过最近才正式发布。

02

软件工程师必备的五种生产力增强方式与实践

在如今全球疫情持续蔓延的情况下，人们往往希望通过各种生产力的增强方式，来替代当前无法面对面开展高效协作的状况。在本文中，我们将和您讨论五种有助于软件工程师和技术公司提高工作效率的实用方式，其中包括：设计系统(Design systems)、代码查询器(code linters)，代码格式工具(code formatters)、持续集成(continuous integration)、以及IaaS/PaaS平台(IaaS/PaaS providers)。它们能够帮助您在不牺牲软件产品质量的情况下，加快整个开发周期和交付进程。

02

这几个CSS概念你了解吗？

CSS Module 在打包的时候会将类名转换成带有hash值的新类名，根据命名规矩，从而杜绝css类名冲突的问题。

02

React学习(十)-React中编写样式CSS(styled-components)

React是一个构建用户界面的js库,从UI=render()这个等式中就很好的映射了这一点,UI的显示取决于等式右边的render函数的返回值.

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭