Perguntas com a tag [styled-components]
A tag styled-components não tem possui recomendações de uso.
35
perguntas
-2
votos
0
respostas
11
visitas
Problemas com o intellisense no Styled Components
Estou realizando um projeto em react com styled components. Configurei um defaultTheme e passei para o ThemeProvider no meu App.tsx. Tambem realizei a configuração do styles no @type. Porem não ...
-2
votos
1
resposta
35
visitas
Como faço para atualizar uma propriedade e aparecer em tela?
Eu quero atualizar o meu objeto através de uma função de incremento e fazer com que apareça em tela. Eu consegui atualizar o objeto, porém, ele só atualiza no meu consolo.log, na parte visual da ...
0
votos
0
respostas
27
visitas
useState deixando site lento em componente que permite que a DIV se mova pela tela
eu tenho o seguinte componente que apos certa utilizacao meu site acaba ficando muito lento. Sei que deve ser por conta do enorme uso e atualizacao dos states que acabam pesando no navegador, mas nao ...
-3
votos
1
resposta
2mil
visitas
Como saber quantos px equivalem 1 cm físico (na régua real) sem precisar de calibragem? [fechada]
Em minha aplicação (com React), preciso que a figura apresentada seja equivalente às medidas do mundo real (cm / mm) em todos os aparelhos.
O meu problema é: se defino o diâmetro de um circulo como 3 ...
1
voto
1
resposta
141
visitas
Como Reutilizar um component com outro css - Styled Components
Seguinte, juro que testei vários métodos mas não obtive sucesso. Tenho esse componente de Button que está na cor verde, e gostaria que sempre que eu reutilizar ele eu possa trocar o Background para ...
-1
votos
1
resposta
259
visitas
Erro typescript no arquivo _document em aplicação Nexjs com styled-components
Criei uma aplicação nextjs configurada com: typescript, eslint, prettier, styled-components e editorconfig. Porém ainda estou recebendo um erro de tipagem no arquivo src/pages/_document.tsx. O código ...
1
voto
0
respostas
523
visitas
O autocomplete do styled-components parou de funcionar no vscode
O autocomplete do styled-components parou de funcionar no vscode, isso aconteceu com várias pessoas com as quais tenho contato. em comum, temos a extensão vscode-styled-components instalada.
O que já ...
-1
votos
1
resposta
252
visitas
CSS para styled-components
Olá, queria saber se tem como usar a tag para selecionar todos os elementos, que em css é * mas no styled-components.
EX:
*{
box-sizing: border-box;
background-color: #fff;
}
Aqui ele adiciona ...
-2
votos
2
respostas
1mil
visitas
Mudar cor de fundo de forma dinâmica
Eu tenho esse código que pega as informações de um Pokémon e eu queria mudar a cor do background de Type dependendo do tipo do Pokémon. Caso ele seja elétrico ficar amarelo, de água ficar azul etc. ...
0
votos
3
respostas
896
visitas
styled-components não aceita ClassName no component pai, apenas nos components filhos
Quando uso ClassName em um styled-components, ele não aplica os estilos configurados. Mas se uso o ClassName em umcomponent filho, então funciona. Em ambos os caso, o html gerado possui a class ...
-2
votos
1
resposta
581
visitas
Como passo um parâmetro para uma função externa de dentro do STYLED-COMPONENTS usando ReactJS com TypeScript?
PS. A idéia aqui não é usar o parâmetro diretamente no styled:
opacity: ${(props) => props.myArr[0].myOpacity)} .
A idéia seria:
Passar um parâmetro (myArray) de um componente qualquer para um ...
0
votos
0
respostas
33
visitas
Quando tento compilar da erro. Error: Invalid hook call
O meu código estava funcionando até eu tentar usar Styled-Components, ele da esse erro Error: Invalid hook call. Hooks can only be called inside of the body of a function component. A unica coisa que ...
0
votos
1
resposta
640
visitas
Estilos global com styled-components
Como posso incrementar estilos globais em styled-components?
Tenho um arquivo com varias variáveis de estilos, como posso incrementar no styled-components?
Exemplo:
src/styles/colors.js
const ...
-3
votos
1
resposta
533
visitas
Como saber o tamanho elemento do elemento pai e mudar atributos dos elementos filhos? [styled components]
Boa tarde, como faço pra saber o tamanho de um elemento pra conseguir mudar o width de outro elemento filho?
Eu tenho um elemento Container que embrulha a Table
quando a table tiver um width maior que ...
0
votos
1
resposta
813
visitas
NextJS com TypeScript e styled-components não está funcionando
Estou tentando usar o styled-components na minha aplicação NextJS, mas sempre retorna um erro, não entendo porque nao esta funcionando.
para iniciar o projeto eu usei o comando:
npx create-next-app ...
-1
votos
1
resposta
830
visitas
Problema com TypeScript + Styled-Components
Boa tarde!
Estou começando a utilizar TypeScript e me deparei com alguns problemas na configuração do projeto React, utilizando TypeScript e Styled-Components!
Estou utilizando declaração de módulo, ...
1
voto
0
respostas
48
visitas
Tenho uma lib em React, usando Rollup e instalei @material-ui/icons , erro ao buildar... já importei no rollup mesmo assim não resolveu
Erro que ocorre ao buildar
Adicionei no rollup.config as dep do material icons e core... mesmo assim o erro continuou o mesmo. alguem poderia ajudar? por favor. uma sugestão..
1
voto
1
resposta
8mil
visitas
Como utilizar props no styled-components?
Gostaria de utilizar props em um attr de um componente no styled-components, ou seja:
export const Button = styled.input.attrs({
type: 'button',
value: `${props => props.value}`
})`
...
1
voto
1
resposta
2mil
visitas
Trocar a cor do CheckBox via Styled-Components
Preciso trocar a cor de um CheckBox quando está selecionado. Estou usando da seguinte maneira:
index.js
import CheckBox from '@react-native-community/checkbox';
...
<CheckBoxes>
<Label>...
0
votos
1
resposta
2mil
visitas
Styled-Component nao ativa o estilo
Estou fazendo um clone do Discord, em TSX, usando styled components.
Porem quando crio os styled.ts, percebo pela identacao que o estilo nao foi aplicado.
Meu Json:
Como fica:
Como deveria estar:
0
votos
1
resposta
1mil
visitas
Como customizar o Arrow do Swiper React.js em jsx ou styled.component
Eu quero customizar os arrows do swiper, mas eu nao achei nada na documentacao.
Este é o codigo do meu navigation:
const params = {
navigation: {
nextEl: ".swiper-button-next",
...
0
votos
0
respostas
570
visitas
Bug ao renderizar em produção fontes no NextJS
Fala pessoal!
Eu estou criando um site estático com o NextJS e styled-components.
Tudo ocorre bem no ambiente de desenvolvimento, porém ao colocar em produção as importações de fontes não funcionam.
@...
0
votos
0
respostas
27
visitas
Galera, estou usando um overflow em um componente aqui, porém ele não mostra todo o conteúdo, fica cortado em uma parte. Poderiam me ajudar?
`export const OptionBar = styled.div'
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15%;
font-size: 1.6rem;
transition: all 0.4s;
align-items: flex-end;
...
-1
votos
1
resposta
5mil
visitas
Como deixar um componente ocupar 100% da altura restante
Estou tentando fazer com que esse retângulo rosa ocupe o restante da tela, mais especificamente... height responsivo, tentei algumas formas, porém sem êxito. Como proceder?
OBS: estou utilizando o ...
0
votos
1
resposta
2mil
visitas
Imagem de fundo com styled-components no React caminho inválido?
Estou tentando usar uma imagem como fundo de uma page em um projeto no react, pensei em importar com styled-components mas não consegui êxito, segue um print onde a imagem se encontrar, e como tentei ...
1
voto
1
resposta
2mil
visitas
Alinhamento à direita com Styled Components
Preciso alinhar o conteúdo em amarelo à direita da minha barra de menus da seguinte maneira:
Porém ao tentar, alinhar, o conteúdo fica colado aos menus:
A disposição dos meus elementos e o meu CSS ...
0
votos
1
resposta
7mil
visitas
Como alterar um ícone dentro de uma aplicação react?
Fala guys, tudo joia?
Estou com uma tremenda dúvida e não faço a mínima ideia de como resolver. Recentemente participei da Semana OmniStack 11 e pude desenvolver uma aplicação do zero, do backend ao ...
0
votos
1
resposta
1mil
visitas
Alterar propriedades do componente em diferentes páginas
Tenho um componente de botão:
Arquivo index.js:
import React from 'react';
import {ActivityIndicator} from 'react-native';
import {Container, Text} from './styles';
import PropTypes from 'prop-types'...
0
votos
1
resposta
980
visitas
Estilização do Picker React Native
Bom dia,
Estou usando Styled Components na estilização dos meus componentes em um app React Native, e estou tentando colocar uma borda colorida e arrendondada no meu Picker, mas o mesmo é renderizado ...
0
votos
1
resposta
1mil
visitas
Como alterar o estilo de um componente sem criar outro componente com Styled Components
Possuo no arquivo LoginWrapper.js a importação de um Grid do material design:
import Grid from '@material-ui/core/Grid';
Possuo no arquivo LoginStyles.js a alteração de css desse componente:
import ...
2
votos
1
resposta
174
visitas
Problemas com "active" ReactJS
Estou tentando criar um estado para setar um ícone como active mudando sua cor, porém estou falhando miseravelmente por ter pouco conhecimento.
Criei um estado com o useState e coloquei o valor true ...
0
votos
1
resposta
835
visitas
Como aplicar um estilo a um componente importado usando styled components
Estou utilizando este componente para utilizar um input com máscara no meu aplicativo, porém eu gostaria que ele tivesse o mesmo estilo que o meu Input no meu styled-components:
const Input = styled....
0
votos
1
resposta
892
visitas
Can't find variable: styled StyledComponents React Native
Seguindo este tutorial
Foi instalado através do yarn o styled-components:
yarn add axios prop-types react-navigation styled-components
Então no meu arquivo styles.js eu defini uma classe:
const ...
0
votos
2
respostas
4mil
visitas
Como usar variáveis de objeto JS para cores no CSS
se eu tenho um objeto JS por ex:
cores = {
main: "#333",
institutional: "blue"
}
e eu uso styled components para montar meus estilos css então crio ele assim:
styled.View`
background-color: ...
1
voto
0
respostas
226
visitas
Como criar um Tema dinâmico com boas praticas para o meu Componente?
Necessito criar um tema dinâmico para um determinado componente ou diversos outros, onde no mesmo utiliza-se técnicas de clean code e boas práticas referentes a estruturação das pastas, separação de ...