[Dúvida] Mesmo componente receber por props valores para estilização e dados

E aí, Elías!

Vamos lá, primeiro, na definição do seu componente CardRecomenda:

export default function CardRecomenda({ titulo, subtitulo, descricao, imagem, botaoDescr, corTitulo, tamanhoFonteTitulo, subtituloFontSize }) {
  // ...
}

Agora, na hora de passar as props lá na hora de usar o Titulo, você manda as props de estilização junto com as de dados:

<Titulo
  cor={corTitulo || "#EB9B00"}
  tamanhoFonte={tamanhoFonteTitulo || "26px"}
>
  {titulo}
</Titulo>

Pronto, assim o CardRecomenda pode receber tanto as props específicas dele quanto as de estilização do Titulo. Se as props de estilização não forem passadas, ele usa os valores padrão.

Qualquer coisa, só dar um grito!

Algo que talvez não tenha ficado tão claro no curso, é que esses props que vc chamou de props de estilização é uma funcionalidade da lib styled-components, onde vc não precisa declarar como parametro do Function Component. Então não daria para ter o mesmo componente usando das duas formas, pois ou o component é um Function Component ou ele é styled-component, a declaração deles é feita de forma diferente

Olá pessoal. Obrigado a ambos pelas respostas!

Elielson, era isso mesmo que eu estava querendo entender, porque o instrutor usou um componente para exemplificar Styled-component, e outro componente para exemplificar Function Component.

E se um componente precisar que tanto a estilização quanto o conteúdo em si sejam dinâmicos, como fazer isso em React?

Qual seria o código para isso? Uma forma seria com inline CSS, mas teria alguma outra forma, seguindo algo parecido com Styled-component ou pelo menos com o CSS não sendo inline?

Acho que uma boa forma de mostrar isso seria exemplificar com 2 "códigos", um "código" com a definição desse componente, e outro mostrando como utilizá-lo.

Desde já obrigado!

Eita, marquei como solução sem querer (e não tem como desmarcar!), tentando contactar o suporte.

Ai acho que a ideia seria ter dois componentes separados, um consumindo o outro.

Pegando ai o exmplo que o outro rapaz comentou, só ficou faltando ele mostrar o CardRecomenda usando o Titulo. O CardRecomenda recomenda seria o Functional Component que iria receber os dois tipos, de conteudo e de estilo, mas ele iria usar o Styled-component Titulo e este iria ter a responsabilidade de lidar com os dados de estilo. Algo como

// arquivo CardRecomenda/index.js
import {Titulo} from '../Titulo'

export default function CardRecomenda({ titulo, subtitulo, corTitulo, tamanhoFonteTitulo }) {
  return (
      <Titulo
      cor={corTitulo || "#EB9B00"}
      tamanhoFonte={tamanhoFonteTitulo || "26px"}
    >
      {titulo}
    </Titulo>
    <h3>{subtitulo}</h3>
  );
}

// arquivo Titulo/index.js
 export const Titulo = styled.h2`
  width: 100%;
  padding: 30px 0;
  background-color: #FFF;
  color: ${props => props.cor || '#000'}; // aqui
  font-size: ${props => props.tamanhoFonte || '18px'}; // aqui
  text-align: center;
  margin: 0;

Obrigado Estudante e Elielson.

Isso resolveria o problema, só que caso quisesse levar estes componentes para outro projeto, ou até se tiver mais componentes que tenham estilização dinâmica, digamos que fica meio bagunçado porque, pode-se dizer que sempre haverá "2 níveis" de componentes no mínimo, porque o componente "final" (que vai utilizar a funcionalidade em si) passaria os valores CSS para o componente "x" (por ex CardRecomenda), que aí passa para o componente "intermediário" (criado à parte somente por causa do CSS) por ele importado, para finalmente chegar ao componente em si, onde os valores CSS/props realmente se aplicam.

Os styled components e até o próprio React acredito que surgiram, entre outros objetivos, para unificar vários arquivos (CSS, JS) em um só, ou com o mínimo de separação possível, mas pra essa situação meio que volta a ficar igual ao que era antes.

Acredito que isso seja algo corriqueiro em empresas grandes como o próprio Facebook / Instagram, etc (de um componente precisar ser dinâmico tanto na estilização quanto nos dados em si), será que eles fazem desta forma?

Bom, apenas pra deixar um questionamento no ar, a dúvida em si foi resolvida, novamente obrigado a todos! \o/