zoukankan      html  css  js  c++  java
  • CSS Modules

    今天我们就把CSS Modules是个啥子东西给他弄明白,这样会更加分。
    首先我们来看一张图:
    一张图理解 CSS Modules 的工作原理:

    我们自己编码的时候有俩个文件,一个是ProductList.less文件,一个是ProductList.jsx文件
    在构建之后会将less文件转换成蓝色标题的那个文件。

    可以由此看出:

    button class在构建之后会被重命名为ProductList_button_1FU0u。button是local name,而 ProductList_button_1FU0u 是 global name 。你可以用简短的描述性名字,而不需要关心命名冲突问题。
    然后你要做的全部事情就是在 css/less 文件里写 .button {…},并在组件里通过 styles.button 来引用他。

    定义全局CSS
    CSS Modules默认是局部作用域的,想要声名一个全局规则,可用:global语法。

    比如:

    .title {
    color: red;
    }
    :global(.title) {
    color: green;
    }

    在引用的时候:

    <App className={styles.title} /> // red
    <App className="title" /> // green

    classnames Package
    在一些复杂场景中,一个元素可能对应多个className,而每个className又基于一些条件来决定是否出现。这时,classnames这个库就非常有用。

    import classnames from 'classnames';
    const App = (props) => {
    const cls = classnames({
    btn: true,
    btnLarge: props.type === 'submit',
    btnSmall: props.type === 'edit',
    });
    return <div className={ cls } />;
    }
    这样,传入不同的 type 给 App 组件,就会返回不同的 className 组合:

    <App type="submit" /> // btn btnLarge
    <App type="edit" /> // btn btnSmall


    本文来自博客园,作者:喆星高照,转载请注明原文链接:https://www.cnblogs.com/houxianzhou/p/15479296.html

  • 相关阅读:
    HTML 页面的 批量删除的按钮
    HTML 选择器
    ....
    java 反射机制
    插件库
    向上滚动
    浮动元素定位float
    中文字体对应的英文名称
    echarts入门教程
    ie9浏览器window.openbug
  • 原文地址:https://www.cnblogs.com/houxianzhou/p/15479296.html
Copyright © 2011-2022 走看看