Perguntas com a tag [styled-components]
A tag styled-components não tem possui recomendações de uso.
21
perguntas
0
votos
1resposta
16 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, ...
0
votos
0respostas
13 visitas
Como estilizar o botão do react-facebook-login no React usando styled-components? [fechada]
O botão de login através do react-facebook-login vem com um estilo próprio. Apesar de possuir um param 'cssClass', não consigo fazê-lo receber o estilo.
import {FacebookButton} from '../styles/buttons'...
1
voto
0respostas
9 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..
0
votos
1resposta
89 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}`
})`
...
0
votos
1resposta
101 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
1resposta
63 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
1resposta
71 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
0respostas
41 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
0respostas
15 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
1resposta
411 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
1resposta
97 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
1resposta
186 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
1resposta
953 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
1resposta
157 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
1resposta
128 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
1resposta
158 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
1resposta
63 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
1resposta
157 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
1resposta
456 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
2respostas
873 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
0respostas
120 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 ...