好客租房163-css Module的应用

1使用css Modules修改NavHeader样式

2在样式文件中修改当前组件的样式

3对于组件库中已经有的全局样式 （比如:am-navber-title）

import React from 'react'
import { NavBar } from 'antd-mobile'
 
// 导入 withRouter 高阶组件
import { withRouter } from 'react-router-dom'
// 导入 props 校验的包
import PropTypes from 'prop-types'
// import "./index.scss"
import styles from "./index.module.scss"
// 添加props校验
NavHeader.propTypes = {
    children: PropTypes.string.isRequired,
    onLeftClick: PropTypes.func
  }
 function NavHeader({children,history,onLeftClick}) {
 // 默认点击行为
 const defaultHandler = () => history.go(-1)
 
 
 return (
   <NavBar
     className={styles.navBar}
     mode="light"
     icon={<i className="iconfont icon-back" />}
     onLeftClick={onLeftClick || defaultHandler}
   >
     {children}
   </NavBar>
 )
}
//函数的返回值也是一个组件
export default withRouter(NavHeader)