Наведите указатель мыши на стилизованный компонент без оболочки

Итак, у меня есть это:

const Link = styled.a`
    color: blue;
`;

<Wrapper>
    <Link href="/">Hover Change</Link>
<Wrapper>

Я хочу наложить эффект наведения только на элемент Link, чтобы изменить цвет на белый. Любые другие документы, которые я видел, заставили бы меня поставить вызов при наведении курсора при вызове Link:

const Wrapper=styled.div`
    &:hover ${Link}: white;
';
<Wrapper>
    <Link href="/">Hover Me</Link>
<Wrapper>

Как разместить a: hover в стиле компонента Link?


reactjs javascript styled-components
person psion    schedule 24.01.2018    source источник

Ответы (1)


arrow_upward
15
arrow_downward

@psion вы проверили что-то вроде следующего кода:

const Link = styled.a`
  color: blue;

  &:hover {
    color: white;
  }
`;

<Link href="/">Hover Change</Link>
person salman.zare    schedule 25.01.2018
comment
На самом деле это правильный подход, стилизуйте непосредственно на компоненте, а не вкладывайте стили. Основная причина использования sc - это возможность повторно использовать компоненты повсюду. Ссылка, имеющая вложенный стиль, просто работает в этом контексте и поэтому не может быть легко использована повторно. - person Simons0n; 26.01.2018