如何在typescript-react项目中使用emotion的css行内样式

最新推荐文章于 2024-05-10 09:55:07 发布

Ocean_HL

最新推荐文章于 2024-05-10 09:55:07 发布

阅读量757

点赞数

分类专栏： typescript react CSS 文章标签： css typescript react.js

本文链接：https://blog.csdn.net/bidang3275/article/details/120154195

版权

react 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

typescript

9 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在React应用中导入和使用@emotion/react库来实现CSS的行内样式。首先，通过`@jsxImportSource@emotion/react`导入运行时支持，然后在组件中利用`css`属性直接为`<div>`元素设置背景颜色。这种方式允许开发者在组件级别应用高级选择符和伪类，增强了CSS的灵活性和组件化。

摘要由CSDN通过智能技术生成

`css` 行内样式

支持选择符，伪类等高级操作

第一步：在组件顶部导入 @emotion/react 下的所有运行时。

/** @jsxImportSource @emotion/react */

第二步：使用 css 属性

/** @jsxImportSource @emotion/react */
import React from 'react';

const App:React.FC = () => {
    return <div css={{ backgroundColor: "hotpink" }}>xxx</div>
}