react项目中CSS继承(CSS样式复用)
2021-04-02 14:25
标签：ret fun over lse order color 理解 冒号 function react项目中CSS继承(CSS样式复用) 标签：ret fun over lse order color 理解 冒号 function 原文地址：https://www.cnblogs.com/Oldz/p/12552727.html.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样式复用)
文章链接：http://soscw.com/index.php/essay/71409.html