Exportação de Styled Component

Fala ai Fernando, tudo bem? Sobre a exportação do styled-components ela pode ser feita normalmente.

Exportando um componente do styled-components:

const StyledButton = styled.button``

export default StyledButton

Será exportado um componente React que renderiza um button.

Ou podemos exportar um componente que dentro dele usa um styled-components:

const StyledTitle = styled.h1``

const Title = ({ children }) => <StyledTitle>{children}</StyledTitle>

export default Title

Espero ter ajudado.

Olá Matheus,

Primeiramente, obrigado pela ajuda.

Porém, minha dúvida é na utilização de funções dentro das template literals, conforme descrito no item 5 (https://cursos.alura.com.br/course/react-componentes-reutilizaveis/task/57672)

O código abaixo, descrito na atividade, está gerando o erro 'css' is not defined no-undef

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;

  ${props => props.primary && css`
    background: palevioletred;
    color: white;
  `}
`;

const Container = () => {
  return(
    <div>
      <Button>Normal Button</Button>
      <Button primary>Primary Button</Button>
    </div>
    );
}

export default Container;

Provavelmente você esquecei de importar o css do styled-components.

Seu import deve estar:

import styled from 'styled-components'

Repare que não importou o css.

Como ele não está sendo exportado como default, você precisa importá-lo com as chaves:

import styled, { css } from 'styled-components'

Isso teoricamente deve resolver o problema.

Espero ter ajudado.

Perfeito Matheus,

Era isso mesmo. Muito obrigado!

Acho que é necessário corrigir código descrito no item 1 desta atividade para constar esta importação que você comentou.

import styled, { css } from 'styled-components'

Abraço!

Você mesmo pode sugerir uma melhoria na descrição Fernando.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.