【React】CSS 局部样式

书写 CSS 的时候,如果 CSS 文件名包含 module,那么说明该 CSS 是一个局部 CSS 样式文件,类似于 vue 中的 scoped。

css 复制代码
.avatarContainer {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgb(213, 226, 226);
}
jsx 复制代码
import styles from '../css/LoginAvatar.module.css'

// ...

<Popover content={content} trigger="hover" placement="bottom">
    <Avatar className={styles.avatarContainer} icon={<UserOutlined/>}/>
</Popover>
相关推荐
liangshanbo12152 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15884 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_4 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
哆啦A梦15886 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫6 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo6 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li6 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
浪裡遊8 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
漂流瓶jz9 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom9 小时前
iframe实战:跨域通信与安全隔离
前端·安全