css样式隔离

1.添加类名

一般会在类名前加上各自的组件名（App-）前缀，这样便于区分是不是此组件中的标签;

<ul className='App-ul'>
          <li className='App-li'>
            {/* 相当与vue中router-link标签
            可以在className设置为一个回调函数，根据函数参数对象中isActive字段控制是否高亮
            下面实例是被选中的NavLink添加selected类名*/}
            <NavLink to='/' className={({isActive})=>{ return isActive?'selected':''}}>
              首页
            </NavLink>
          </li>
          <li className='App-li' >
            <NavLink to='/find' className={({isActive})=>{ return isActive?'selected':''}}>
              发现
            </NavLink>
          </li>
        </ul>

.App-header{
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: orange;
    height: 60px;
    width: 100%;
}
/* 尽量别用标签名作为选择器 */
/* 方式一:设置className以组件名作为开头，例如给其加类名以App开头 */
.App-header .App-ul{
    list-style: none;
    display: flex;
    justify-content: space-around;
    margin: 0;
    padding: 0;
    text-align: center;
}
.App-header .App-ul .App-li{
    flex: 1;
    height: 60px;
    line-height: 60px;
    border-right: 1px solid #000;
}
.App-header .App-ul .App-li:last-child{
    border-right: none;
}
.App-header .App-ul li a{
    color: #666;
    text-decoration: none;
    width: 100%;
    display: inline-block;
}
.App-header .App-ul .App-li .selected{
    color: red;
}

2.样式模块化：

1.css文件为  文件名.module.css格式;

2.在jsx文件中作为对象进行导入;

3。最后在相对应的类名上添加对象的属性名设置类名；

/* 给css文件名添加model关键字，为样式隔开 */
.text-color{
    background-color: orange;
    color: #fff;
}

// import './Page404.model.css'
// 针对模块化的样式，用下面方式进行导入
import styles from './Page404.module.css';
console.log(styles)
function Page404() {
    return ( 
        <div className="Page404-div">
            <h1>
            404 Not Found
            </h1>
            <p className={styles['text-color']}>hello world</p>
            <p>
                <span >react样式模块化写法</span>
            </p>
        </div>
     );
}

export default Page404;