Стилизованные компоненты: почему интерполируется: hover в css helper не работает?

Question

Я запутался, почему следующие два использования компонентов стиля не эквивалентны:

Случай 1

const Button1 = styled.button`
    border: 1px solid; 
    &:hover{
      opacity: 0.5;
    }
`

Случай 2

const OnHoverLowOpacityCSS = css`
    &:hover{
      opacity: 0.5;
    }
`
const Button1 = styled.button`
    border: 1px solid; 
    ${OnHoverLowOpacityCSS}
`

По некоторым причинамСлучай 2 зависает, похоже, не работает.Чем можно объяснить это несоответствие?