zhanghao 2020-03-23
.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} /> ); };