react组件样式冲突解决 CSS Module写法

• 各页面（组件内）之间样式互相影响的情况比较多,推荐给大家一个 CSS Modules 省事的写法,每个都加styles. 比较繁琐

  // 页面（组件内）jsx文件 
  import styles from './bar.less' // 启用css Modules
  
  // 只需要 **组件最外层** 添加 **styles.**  
  const Bar = () => (
    <div className={styles.main}>  
      <span className="detail">🌰</span>
  		<ul className="list">
      	<li className="item">🌰</li>  
      <ul>
    </div>
  )
  

  // bar.less 文件 注意其余类名嵌套在 :global内 
  .main {
    color: #fff;
    :global {        
      .detail {
        color: #fff;
      }
      .list {
        color: #000;
      }
    }
  }
  

需要注意

1. jsx 文件内 只需要 组件最外层 添加 styles. 其余样式直接写className即可
2. less文件 需要在最外层类名下 添加 一个:global ,其余类名写在其内