Как подключить if {props.isDragActive} с собственным css: hover в styled-components

Question

Итак, у меня есть стили в компоненте dropzone:

${props => props.isDragActive && css`
    border-color: red;
    &::before {
        opacity: 1;
    }
`}
&:hover {
    border-color: red;
    &::before {
        opacity: 1;
    }
}

Возможно ли связать эти стили без создания внешней переменной со стилями или использования onHover?

const dragOrHover = css`
    border-color: red;
    &::before {
        opacity: 1;
    }
`

${props => props.isDragActive && dragOrHover}
&:hover {
    ${dragOrHover}
}