React CSS Modules 用法学习分享

编程语言 12/28 阅读 379 views次 人气 0
摘要:

原始代码:

--------------------------------------------------------------------------------------------------------------------------------------

import React from 'react';
import  './B.less' ;

export default  (props) => {
    function handleClick() {
        props.onChange("abc");
    }
    return <div className="myFirst" onClick={handleClick}>{props.name}</div>
}

--------------------------------------------------------------------------------------------------------------------------------------

改造后代码:

import React from 'react';
import style from './B.less' ;

export default  (props) => {
    function handleClick() {
        props.onChange("abc");
    }
    return <div className={style.myFirst} onClick={handleClick}>{props.name}</div>
}

--------------------------------------------------------------------------------------------------------------------------------------

原始配置:

{test: /\.less/, loader: "style!css!less"},

--------------------------------------------------------------------------------------------------------------------------------------

改造后配置:

{test: /\.less/, loader: "style!css?modules!less"},

--------------------------------------------------------------------------------------------------------------------------------------

改造前结果

class="myFirst"

--------------------------------------------------------------------------------------------------------------------------------------

改造后结果

class="_2iBp2IsSznFMX6CKbqGSAZ"

--------------------------------------------------------------------------------------------------------------------------------------

结论:放弃使用这个,因为经常设计师需要修改css样式,如果使用_3zyde4l1yATCOkgn-DBWEL这种类名,源代码与页面的关系被截断,不方便维护
并且Less 本身已经通过 继承关系解决了css 样式冲突问题,没有必要再使用这个技术

小奋斗文章

--------------------------------------------------------------------------------------------------------------------------------------

评论

该文章不支持评论!

分享到: