.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}
        />
    );
};