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)
