【Ant Design Pro 三】样式动态绑定 react样式绑定

第一步，创建样式文件，在页面目录下根据自己习惯创建一个less文件，用来写样式类

第二部，引用该文件

import styles from './details.less';

//details.less 代码：

.menu {width: 95%;
}
.navigation-menu{width: 90%;
}

下面我们在js 中绑定 class；

1.传递一个字符串作为 className 属性：

<span className={styles.menu}>Menu</span>

2. 动态绑定class

2.1、使用逻辑运算符

<div className={ this.state.isError && styles.menu }>hello world</div>

2.2、使用三元运算符

<div className={ this.state.isShow ? styles.menu : '' }>hello world</div>

style 的绑定语法也类似：

<div style={ this.state.isShow ? {display: 'inline-block'} : { display: 'none'} }>hello world</div>

【Ant Design Pro 三】样式动态绑定 react样式绑定相关推荐

Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器，桌面安装运行
学习参考: electron-api-demos 我以下的方式,其实并把Ant Design Pro文件打包到生成的安装包里,所以,安装包=Ant Design Pro+Electron环境 ant- ...
ant design pro模板_Ant Design Pro 学习笔记
学习笔记摘要介绍 Ant Design Pro 是一个基于Ant Design搭建起来的模板项目.它提供了两个主要布局:BasicLayout.UserLayout,在布局基础上制作了20多个基础页 ...
ant design pro模板_ant design pro 当中改变ant design 组件的样式和数据管理
ant design pro 简介官网简介 Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续 ...
React 基于ant design Pro 4 实现的一个分页, 自定义页码颜色
标题目录代码样式前言这是在 Ant Design Pro 4 中基于 ant design 的 Pagination 分页组件的基础上开发的. 有这么一个需求, 页码的颜色基于该页是否有差异, ...
React Ant design pro 访问服务器接口，获取数据显示
React Ant design pro 访问服务器接口一.前两天更新了Ant design pro环境搭建,需要了解的小伙伴可以看一下之前的内容,还有react基础教程噢. 二.框架搭建完后,一般 ...
在Ant Design Pro（React）中使用ECharts
使用Ant Design Pro解决方案可以快速搭建前端框架,而ECharts是前端最流行,功能最强大的前端图表库. 下面将讲解下如何在Ant Design Pro使用ECharts. Ant Des ...
React + Ant Design Pro项目实现keep-alive页签
背景 PC端管理系统,采用 ant design pro 方案,它是阿里的一个管理系统框架,技术栈是react. 相比vue,react一个先天不足是不支持 keep-alive,所以管理系统中的多页 ...
react ant design pro typescript springboot activiti权限、工作流框架
是什么? 使用springboot,activiti,mybatis,react,ant design pro,typescript 开发的后台管理系统(包含权限管理.工作流等功能),真正前后端分离的 ...
ant design pro（一）安装、目录结构、项目加载启动【原始、以及idea开发】
一.概述 1.1.脚手架概念编程领域中的"脚手架(Scaffolding)"指的是能够快速搭建项目"骨架"的一类工具.例如大多数的React项目都有src,p ...

【Ant Design Pro 三】样式动态绑定 react样式绑定

【Ant Design Pro 三】样式动态绑定 react样式绑定相关推荐

最新文章

热门文章