1使用css Modules修改NavHeader样式
2在样式文件中修改当前组件的样式
3对于组件库中已经有的全局样式 (比如:am-navber-title)
import React from 'react'标签:withRouter,Module,import,组件,NavHeader,163,children,css,onLeftClick From: https://blog.51cto.com/u_15460007/6049556
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)