Most voted "styled-components" questions
33 questions
Sort by count of
-
2
votes1
answer87
viewsProblems with "active" Reactjs
I’m trying to create a state to set an icon like active changing its color, but I am failing miserably for having little knowledge. I created a state with the useState and I set the value true by…
-
1
votes0
answers161
viewsHow to create a Dynamic Theme with good practice for my Component?
I need to create a dynamic theme for a particular component or several others, where techniques of clean code and good practice concerning structuring of directories, file separation by types among…
-
1
votes0
answers10
viewsI have a lib in React, using Rollup and installed @material-ui/icons , error when buildar... I already imported in rollup anyway did not solve
Error occurring while buildar I added in the rollup.config the material icons and core Dep... yet the error continued the same. anyone could help? please. a suggestion..…
-
1
votes1
answer516
viewsRight alignment with Styled Components
I need to align the yellow content to the right of my menu bar as follows: But when trying, align, the content is glued to the menus: The layout of my elements and my CSS are as follows: return (…
-
0
votes2
answers1750
viewsHow to use JS object variables for colors in CSS
if I have an object JS for ex: cores = { main: "#333", institutional: "blue" } and I use styled components to build my styles css so I create him like this: styled.View` background-color:…
javascript css react react-native styled-componentsasked 5 years, 2 months ago Julio Henrique 4,352 -
0
votes1
answer627
viewsCan’t find variable: Styled Styledcomponents React Native
Following this tutorial Was installed through Yarn the Styled-Components: yarn add axios prop-types react-navigation styled-components So in my Styles.js file I defined a class: const Container =…
-
0
votes1
answer246
viewsHow to style an imported component using Styled Components
I’m using this component to use a mask input in my application, but I would like it to have the same style as my Input in my Styled-Components: const Input = styled.TextInput` paddingHorizontal:…
-
0
votes1
answer251
viewsPicker React Native stylization
Good morning, I’m using Styled Components in styling my components in an React Native app, and I’m trying to put a colorful and rounded edge on my Picker, but it’s rendered without styling. The code…
-
0
votes1
answer366
viewsBackground image with Styled-Components in React invalid path?
I’m trying to use an image as the background of a page in a React project, I thought to import with styled-components but I did not succeed, follows a print where the picture is, and what I tried to…
-
0
votes0
answers20
viewsGuys, I’m using an overflow on a component here, but it doesn’t show all the content, it gets cut into one part. Could you help me?
`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;…
-
0
votes0
answers170
viewsBug when rendering in production Nextjs fonts
Talk people! I’m creating a static website with Nextjs and Styled-Components. Everything happens well in the development environment, but when putting into production imports of sources do not work.…
-
0
votes1
answer343
viewsHow to change the style of a component without creating another component with Styled Components
I have in the file Loginwrapper.js the import of a Grid material design: import Grid from '@material-ui/core/Grid'; I have in the Loginstyles.js file a css change for this component: import styled…
-
0
votes1
answer505
viewsChange component properties on different pages
I have a button component: Filing cabinet index.js: import React from 'react'; import {ActivityIndicator} from 'react-native'; import {Container, Text} from './styles'; import PropTypes from…
-
0
votes1
answer2264
viewsHow to change an icon within a React application?
Talk guys, everything jewels? I have tremendous doubt, and I have no idea how to fix it. I recently participated in Omnistack Week 11 and was able to develop an application from scratch, from…
-
0
votes1
answer516
viewsChanging the Checkbox color via Styled-Components
I need to change the color of one CheckBox when it is selected. I am using it as follows: index.js import CheckBox from '@react-native-community/checkbox'; ... <CheckBoxes>…
-
0
votes1
answer45
viewsProblem with Typescript + Styled-Components
Good afternoon! I am starting to use Typescript and came across some problems in the configuration of the React project, using Typescript and Styled-Components! I am using module statement,…
-
0
votes1
answer38
viewsGlobal styles with Styled-Components
How can I increment global styles in Styled-Components? I have a file with several style variables, as I can increment in Styled-Components? Example: src/Styles/Colors.js const ColorPrimary = "#000"…
-
0
votes0
answers10
viewsCan you reference one component within another in Styled-Components?
There is the possibility of doing something of the kind in Styled-Components? export const Componente1 = styled.div` background-color: #fff; `; export const Componente2 = styled.div` Componente1 {…
-
0
votes1
answer193
viewsHow to customize Swiper React.js Arrow in jsx or Styled.Component
I want to customize the Arrows of Swiper, but I found nothing in the documentation. This is the code of my navigation: const params = { navigation: { nextEl: ".swiper-button-next", prevEl:…
-
0
votes1
answer256
viewsStyled-Component does not activate style
I’m making a clone of Discord, on TSX, using Styled Components. However when I create the Tyled.ts, I notice by the indentation that the style was not applied. Meu Json: How does it look: As it…
-
0
votes1
answer855
viewsHow to use props in Styled-Components?
I would like to use props in a attr of a component in Styled-Components, that is to say: export const Button = styled.input.attrs({ type: 'button', value: `${props => props.value}` })` display:…
-
0
votes1
answer263
viewsNextjs with Typescript and Styled-Components not working
I’m trying to use the Styled-Components in my Nextjs application, but always returns an error, do not understand why it is not working. to start the project I used the command: npx create-next-app…
-
0
votes0
answers46
viewsDiv is not occupying 100% of the page height
I’m using React.js + next.js + Styled Components to develop the front of an app. In my Layout file I have a Wrapper that makes the other two div’s (Leftcontainer and Rightcontainer) stand next to…
-
0
votes0
answers15
viewsWhen I try to compile error. Error: Invalid hook call
My code was working until I tried to use Styled-Components, it gives this error Error: Invalid hook call. Hooks can only be called Inside of the body of a Function Component. The only thing I did…
-
0
votes0
answers49
viewsModify SVG with Styled-Components (React/next)
The problem is specific and found nowhere. Summary: How I could modify the properties of my standard JSX SVG icon directly in Styled-Components as well as other icons? Details: I know with…
-
0
votes0
answers20
viewsoverflow-y is not working in div after width breakpoint
I’m trying to set overflow-y: auto after a div breakpoint, but it’s not working as I imagined. I have a div-container where has a header, a div wrapper where this has two other (one for a Fields and…
-
0
votes0
answers23
viewsHow to prevent a carousel from slipping when it reaches the last item?
I’m making a carousel from scratch, it contains 7 items, the problem is when it gets to the last item I can still click to the next one, I want every time I get to the last item the carousel stop.…
-
-1
votes1
answer1333
viewsHow to let a component occupy 100% of the remaining height
I’m trying to get this pink rectangle to occupy the rest of the screen, more specifically... responsive height, tried some shapes, but unsuccessfully. How to proceed? OBS: I’m using the…
-
-1
votes0
answers5
viewsHow to import a React component with Styled-Components in next using monorepo?
I’m using monorepo with Lerna and Yarn workspaces in a nextJS project, I can run the project but I can’t reuse components when I put Styled-Components in them. There’s always a mistake: Module parse…
-
-1
votes0
answers16
viewsstylization of other files
Good night! I’m new here in the stack and have little experience with React and Styled-Components. I have an excerpt of stylization below that I want to reuse in another part of my code without…
-
-1
votes0
answers12
viewsonScroll with Styled-Components + Typescript
I have a problem to use onScroll event with Styled-Components + typescritp. It happens to the following error message: 'No overload matches this call. Overload 1 of 2, '(props:…
-
-2
votes1
answer23
viewsHow do I pass a parameter to an external function from within the STYLED-COMPONENTS using Reactjs with Typescript?
PS. The idea here is not to use the parameter directly in Styled: opacity: ${(props) => props.myArr[0].myOpacity)} . The idea would be: Pass a parameter (myArray) of any component for a…
-
-3
votes1
answer45
viewsHow to know the parent element size and change child element attributes? [Styled Components]
Good afternoon, how do I know the size of an element to change the width of another child element? I have a Container element that wraps the Table when the table have a width greater than 1400px I…