冲突的样式；公共组件封装

src/common/HeaderBar/index.js

@@ -3,10 +3,10 @@ import './index.scss'
 
 const HeaderBar = (props) => {
     return (
-        <div className="detail-header">
-            <i className={'iconfont iconiconfront-68 return'}></i>
+        <div className="detail-header" style={{...props.style}}>
+            <i className={`iconfont ${props.arrow ? 'iconiconfront-68' : ''} return`} onClick={props.goBack}></i>
             <span className='herder'>{props.title}</span>
-            <i className={'iconfont icongouwuche shopping-cart'}></i>
+            <i className={`iconfont ${props.cart ? 'icongouwuche-xianxing' : ''} shopping-cart`} onClick={props.goShop}></i>
         </div>
     );
 };

src/components/scholarship/CategoryItem/CategoryItem.js

@@ -10,7 +10,7 @@ export default class CategoryItem extends Component {
         const {course_title, price1, price0, first_level_tip, image_name, upgrade, upgradeImg} = this.props;
         return (
             <WingBlank>
-                <div className={'category'}>
+                <div className={'scholarship-category'}>
                     <div className={'imageContainer'}>
                         <img className={'image'} src={image_name}></img>
                         {

src/components/scholarship/CategoryItem/CategoryItem.scss

-.category {
+.scholarship-category {
   display: flex;
   align-items: flex-start;
   height: 90px;