Entregue aplicações web profissionais com autonomia e destrave a sua carreira para salários acima de 10 mil reais. Garanta sua vaga no Fullstack Master: go.devpleno.com/fsm
Consegui minimizar ainda mais o código eliminando a necessidade de definir className=. A sintaxe fica assim: basicamente criei um componente react q recebe as props, pega os nomes delas e coloca como className no return: function Div(props) { const classList = Object.keys(props).reduce((total, element) => { if (element === 'children') return total; return total + ' ' + element; }); return ( {props.children} ); } Ficou interessante, só q falta uma coisa pra melhorar, mexer no formatador das cores do vscode, para que as props desse componente (q depois viram classes) fiquem na cor de string assim como a string do className é.
muito boa ideia, curti essa abordagem, lembra o Chakra-UI. uma sugestão, receber uma prop "as" pra que seja possível renderizar outras tags além da div (por consequência teria que mudar o nome do componente hehe)
@@ursochurrasqueira entao mas agora encontrei problemas nisso, isso faz o render do styled components ficar mais pesado doq ja é. Agora tô só no tailwind com className mesmo, ta sendo ótimo.
Olá amigo ! Sou iniciante e me vejo aqui com muitas opções de estilização com diferentes ferramentas, tailwind, styled-components, chakra, etc. Eu li em um forum que CSS-in-JS adiciona um overhead/atraso no desempenho da aplicação. Você acha que impacta muito? Não? Abc !
@@henriquedelben Exatamente. Eu troquei Styled Components recentemente de um projeto inteiro por SCSS Modules. Minha dica é tu saber um pouco de tudo pra conseguir se virar, e conseguir julgar a melhor opção pra cada tipo de projeto. Se nem sempre seu foco no projeto é estilo e quer algo que seja rápido, Chakra ou Tailwind deve resolver. Mas eu sinto que as pessoas estão se distanciando cada vez mais do básico. Dá pra ser produtivo só com CSS ou SCSS.
Olá, Amigo! Estou tendo problemas ao utilizar a extensão TailwindCss para habilitar o Intellisense esta lib que você utilzou no video, a tailwind-styled-components. Fui na documentação oficial da tailwind-styled-omponents, fiz toda a configuração recomendada(modificando o settings.json), mas mesmo assim não funciona. Você sabe alguma alternativa?
A sua abstração que juntou um componente em styled-components + um componente com tailwind-styled-components não funcionou. Pelo vídeo, as propriedades do Wrapper não persistiam no CustomWrapper quando você atualizava a página, gostaria de entender o porquê de você não ter corrigido isso. No mais, bom vídeo!
