码迷,mamicode.com
首页 > Web开发 > 详细

react项目中CSS继承(CSS样式复用)

时间:2020-03-23 17:10:59      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:ret   fun   over   lse   order   color   理解   冒号   function   

 

.green-flag {
    width: 2rem;
    height: 2rem;
    padding: 0.375rem;
    border-radius: 0.25rem;
    user-select: none;
    user-drag: none;
    cursor: pointer;
}

.green-flag:hover {      //冒号:的含义是此样式的不同状态下
    background-color: $motion-light-transparent;
}

.green-flag.is-active {  //我的理解为CSS样式的继承,样式抽取
    background-color: $motion-transparent;
}
const GreenFlagComponent = function (props) {
    const {
        active,
        className,
        onClick,
        title,
        ...componentProps
    } = props;
    return (
        <img
            className={classNames(
                className,
                styles.greenFlag,
                {
                    [styles.isActive]: active   //如果active=true,就采用子样式。否则使用父类样式
                }
            )}
            draggable={false}
            src={greenFlagIcon}
            title={title}
            onClick={onClick}
            {...componentProps}
        />
    );
};

 

react项目中CSS继承(CSS样式复用)

标签:ret   fun   over   lse   order   color   理解   冒号   function   

原文地址:https://www.cnblogs.com/Oldz/p/12552727.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!