react CSS module 学习

前端之家收集整理的这篇文章主要介绍了react CSS module 学习前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

原始代码

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 样式冲突问题,没有必要再使用这个技术

原文链接:https://www.f2er.com/react/305144.html

猜你在找的React相关文章