【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>

查看专栏详情 立即解锁全部专栏