Как использовать тему StyledComponents внутри компонента

Question

Ниже я создал стиль под названием Link. Однако тема находится внутри this.props. Каким образом можно извлечь тему из реквизита и передать в стилизованный компонент Link

ReferenceError: тема не определена

import React from 'react';
import styled from 'styled-components';
import { withTheme } from 'styled-components';

export const Link = styled.p`
  position: absolute;
  z-index: 10;
  bottom: 20px;
  right: 300px;
  width: 100%;
  font-size: 1.5rem;
  text-align: right;
  cursor: pointer;

  a {
    color: ${theme.apricot};  // <-- error
    cursor: pointer;

    :hover {
      color: ${theme.offWhite};   // <-- error
    }
  }
`;

class NomicsLink extends React.Component {
  render() {
    console.log(this.props.theme);
    return (<Link>Powered by <a href="https://nomics.com/" target="blank">Nomics APIs.</a></Link>)
  }
}

export default withTheme(NomicsLink);

Этот console.log печатает следующее:

{ red: '#FF0000',
  black: '#393939',
  grey: '#3A3A3A',
  lightgrey: '#E1E1E1',
  offWhite: '#EDEDED',
  apricot: '#FEBE7E',
  margin: 0,
  padding: 0 }

Answer 1

Все styled-components автоматически получают theme реквизит.

Вы можете получить к ним доступ внутри стилизованного компонента с помощью:

const Link = styled.a`
  color: ${props=>props.theme.apricot};
`;

Дополнительные параметры по тематике см. Документы