zoukankan      html  css  js  c++  java
  • CSS Modules

    组件之间样式覆盖问题

    • 能够利用CSS Modules解决组件之间样式覆盖的问题

    概念

    • 问题:CityList组件的样式,会影响Map组件的样式
    • 原因:在配置路由的时候,CityList组件与Map组件都会被导入到路由中,那么只要组件被导入,那么相关的样式也会被导入进来,如果两个组件的样式名称相同,那么就会影响另外一个组件的样式
    • 小结:默认情况下,只要导入了组件,不管组件有没有显示在页面中,组件的样式就会生效
    • 解决方式
      • 写不同的类名
      • CSS IN JS

    CSS IN JS

    CSS IN JS 是使用JavaScript 编写 CSS 的统称,用来解决CSS样式冲突,覆盖等问题;

    CSS IN JS 的具体实现有50多种,比如:CSS Modules、styled-components等

    推荐使用:CSS Modules(React脚手架已经集成进来了,可以直接使用)

    CSS Modules

    概念

    • CSS Modules 通过对CSS类名重命名,保证每一个类名的唯一性,从而避免样式冲突问题
    • 实现方式:webpack的css-loader 插件
    • 命名采用:BEM(Block块、Element元素、Modifier三部分组成)命名规范。比如: .list_item_active
    • 在React脚手架中演化成:文件名、类名、hash(随机)三部分,只需要指定类名即可

    /* 自动生成的类名,我们只需要提供 classname 即可 */
    [filename]_[classname]__[hash]

    // 类名
    .error {}
    // 生成的类名为:
    .Button_error__ax7yz

    使用

    -1 创建名为[name].module.css 的样式文件(React脚手架中的约定,与普通CSS区分开)
    // 在 CityList 组件中创建的样式文件名称:
    index.module.css

    1. 组件中导入该样式文件(注意语法)
      // 在 CityList 组件中导入样式文件:
      import styles from './index.module.css'

    2. 通过 styles 对象访问对象中的样式名来设置样式

    1. 在 NavHeader 目录中创建名为 index.module.css 的样式文件。

    2. 在样式文件中修改当前组件的样式(使用单个类名设置样式,不使用嵌套样式)。

    3. 对于组件库中已经有的全局样式(比如:.am-navbar-title),需要使用 :global() 来指定。

      // OK
      .navBar {}
      // 不推荐嵌套
      .navbar .test {}

      :global(.am-navbar-title) { color: #333; }
      .root :global(.am-navbar-title) {}

    示例demo
    .navbar {
    color: #333;
    background-color: #f6f5f6;
    }

    .navbar :global(.am-navbar-title) {
        color: #333;
    }
    .map {
        height: 100%;
        padding-top: 45px;
    }
    

    页面结构



    地图


  • 相关阅读:
    JDBC 复习4 批量执行SQL
    JDBC 复习3 存取Oracle大数据 clob blob
    Oracle复习
    Linux命令(1)grep
    JDBC 复习2 存取mysql 大数据
    JDBC 复习1 DBUtil
    php 环境搭建问题
    Windows 批处理 bat 开启 WiFi 菜单选项 设置ID PWD
    Bat 批处理启动和停止Oracle 服务
    docker 学习1 WSL docker ,Windows docker
  • 原文地址:https://www.cnblogs.com/xm0328/p/14021920.html
Copyright © 2011-2022 走看看