列表找房（二）01-筛选条件——Filter组件 & CSS模块化分析-自定义名称.module.css-保证不同css模块中同名的样式类不会冲突 & 原始状态渲染类名-global(类名)

筛选条件——Filter组件&CSS模块化分析-自定义名称.module.css-保证不同css模块中同名的样式类不会冲突 & 原始状态渲染类名-:global(类名)

筛选条件结构分析

• 提供了四个组件
  • Filter 筛选栏组件入口
  • FilterTitle 筛选栏菜单
  • FilterPicker 前三个筛选栏菜单的下拉选框
  • FilterMore 最后一个筛选栏菜单的下拉选框

CSS模块化分析

• css文件命名方式

• 自定义名称.module.css

• 导入css模块

  import styles from './index.module.css'
  

• 使用css样式

  <div className={styles.content}>
  

• CSS模块化原理：动态将样式名称添加一个随机生成的后缀，可以保证不同css模块中同名的样式类不会冲突

  .FilterTitle_root__3CjZy
  

• 如果不希望相关类名自动添加后缀，可以按照如下方式处理

  原始状态渲染类名-:global(类名)

  .dropdown :global(.icon-arrow) {
    margin-left: 3px;
    color: #bbb;
    font-size: 12px;
  }
  

筛选条件栏整体布局

• 筛选菜单数据

const titleList = [
  { title: '区域', type: 'area' },
  { title: '方式', type: 'mode' },
  { title: '租金', type: 'price' },
  { title: '筛选', type: 'more' }
]

• 菜单基本布局

<Flex.Item key={item.type}>
  <span className={styles.dropdown}>
    <span>{item.title}</span>
    <i className="iconfont icon-arrow" />
  </span>
</Flex.Item>