Questions tagged [styled-components]
styled-components is a JavaScript library for styling React applications. It removes the mapping between styles and components, and lets you write actual CSS augmented with JavaScript.
4,004
questions
0
votes
1
answer
20
views
How to customized an input component from another component?
For this input component, I want to make it as a basic component for other components.
import React, { InputHTMLAttributes } from "react";
import styled, { css } from "styled-components&...
1
vote
0
answers
12
views
Why does rollup not compile my styled-components
I was so happy that my Component Lib works with regular CSS but now I am trying to add styled components and of a sudden, I get the error (on the project which is importing the lib)
TypeError: Cannot ...
0
votes
0
answers
23
views
What is the correct way to extend MUI v5 component with additional components and styled utility?
What is the correct way to extend build-in components of MaterialUI v5? What I'd like to do:
Style the build-in component
Make a wrapper on top of my styled component with additional components
The ...
0
votes
0
answers
28
views
How can I change a prop name inside styled component?
I am using one pre-made react container and it gets several props and I want to override some of the styles and I need to change prop propName1 to propName2
const StyledComponent = styled(({ propName1,...
0
votes
0
answers
21
views
Could not find a declaration file for module 'styled-components'
im having this error when trying to create a global style using styled components v5.3.5. Can you guys help me here please?
import { createGlobalStyle } from "styled-components";
export ...
0
votes
3
answers
25
views
Using conditional statements with styled components
I'm trying to style my PaymentBtn which includes my main styled Button but I only want the hover effect to be affected when my isLoading prop is activated while keeping everything the same EXCEPT the ...
1
vote
1
answer
21
views
Image from web doesn't displayed
I'm building a simple site and trying to src any image from web in Slider (exemple this image) but it doesn't display at all.
import { ArrowLeftOutlined, ArrowRightOutlined } from "@material-ui/...
0
votes
0
answers
19
views
Responsive cards with not the same height of image, title and content [duplicate]
I have many cards of the same size but the inside is not the same size as the image, title and content like this
I have this
I want you to be like this
I want to be like this
of course not in fix ...
0
votes
0
answers
38
views
How to set height to an element by his background image height
Hi I have this component in my app, Right now the height of this ButonBase is hard coded.
I get an image from backend and I set that image as a backgroundImage for the ImageImagine component.
I need ...
0
votes
1
answer
55
views
How to change checkbox checked color with react?
There is a checkbox component:
import React, { InputHTMLAttributes } from "react";
import styled, { css } from "styled-components";
export const CheckBox: React.FC<...
0
votes
0
answers
14
views
How to fix a relatively postioned image that is causing the whole page to overflow
Can someone help me fix this relatively positioned image that is causing the whole page to overflow: page overflow
css code for the the image:
:local(.pictureTag) {
animation: slideInAndOvershoot ...
0
votes
0
answers
15
views
Styled-components are not using the style tag in production mode
The styled-components are works well both in development and in production mode.
Classnames are generated, styles are applied, so no issues on user's side:
However, when I click on the <style> ...
0
votes
0
answers
18
views
Styled components and multiple react instances in html
I have an own component library and I'm using components from it in Hubspot cms through another custom framework, which builds the Hubspot modules with Webpack and sends those to Hubspot. Each ...
0
votes
2
answers
29
views
onClick event not firing in my styled component in my react app
I'am trying to trigger an onCick event that i passed to my style component icon tag but for some reason the event does not get triggered when the icon is clicked. I've tried raping it in a div and ...
0
votes
0
answers
21
views
React Styled components with keyframes not working?
I tried initially working with makestyles but that didn't work with Keyframes and now I wrote the below code that compiles properly but for some reason doesnt show anything on screen??
Is there ...
0
votes
1
answer
39
views
How to add style to a input component with React?
In a customized input component
import React, { InputHTMLAttributes } from "react";
import styled, { css } from "styled-components";
type InputTypeProps = {
disabled: boolean;
};...
1
vote
1
answer
53
views
How to use other people's react components in my dash app?
I would like to include a 5-star user editable rating in my dash app, similar to what's asked in this thread which leads to this github page where someone seem to have built it.
However, I am not sure ...
0
votes
0
answers
22
views
How to add custom css with styled component and reactjs? Warning: Received false for a non-boolean attribute isfirstimageattachment
I like to add styles based on the props.
import {ArrowBackIcon} from './styles';
const App = () => {
...
const isFirstImageAttachment = (index) => {
return (
filteredImages....
1
vote
0
answers
29
views
Horizontal scroll in nav bar using styled component reactjs
I am working on react as a beginner. I have nav bar which has tabs. I have to use styled component only.
import styled from "styled-components";
import { Link } from 'react-router-dom';
...
0
votes
1
answer
30
views
AutoFocus on Text Input in React Using Styled Components
How do you make the TextInput in React using Styled Components to be autoFocus on page load?
I did using useEffect but it seems it doesn't autoFocus on the TextInput. I wanted the email text input to ...
0
votes
2
answers
47
views
How to add style to a component with styled component react?
I'm trying to add style to a component.
It works fine with a component imported from the material-ui library, but it doesn't work when it comes to my original component(that is not used in any library)...
2
votes
0
answers
35
views
React Styled Componte + MUI
I am using GlobalStyle(createGlobalStyle) from Styled-Components and its working fine unless to customize MUI components
Basically, I have (from HTML render)
<style data-styled="active" ...
4
votes
0
answers
98
views
Remix Hydration failed: UI on server and client do not match
It's fine locally (known warning and CSS renders well) but on Vercel my Remix app gets this error:
Hydration failed because the initial UI does not match what was rendered on the server.
Business ...
1
vote
2
answers
27
views
Create dynamic tags with Styled Components
Is there a way to create a dynamic tag using styled-components?
For example:
const MyComponent = styled(CustomTag)``;
<MyComponent element="h1" />
0
votes
1
answer
27
views
How to change overflow style to hidden when modal opens
I am trying to create react app and i want overflow to hidden when button is pressed,
i want to display contact form on modal but overflow is running everything i can scroll even with modal is open
...
0
votes
1
answer
31
views
div left bottom corner gradient with styled-component
Im trying to achieve this left bottom gradient
gradient_
I tried to clip the element that have the linear-gradient, but I loose the blur effect.
const Container = styled.div`
width: 680px;
height: ...
0
votes
0
answers
13
views
How to conditionally enable style in styled components?
I have a string in props, depending on its value I want to give a property different value, or NO value at all, like I haven't specified it at all. How to?
1
vote
1
answer
53
views
Animate text-shadow color left to right CSS
I have some text which already has a text-shadow, on hover I want the text-shadow color to transition horizontally similarly to this answer here:
https://stackoverflow.com/a/17212432/12278378
I don't ...
2
votes
0
answers
17
views
How can I make the "as" prop required on a styled-component?
I have a "Text" component that has visual variants. I don't want to provide a default underlying element (like a span, for example). I feel like requiring the as prop would maintain the ...
1
vote
0
answers
20
views
react-paginate class applied but not getting the styles
i use react-paginate package and for styling, I use styled-components
in the react-paginate docs, it says to give the container a class I should use the className property for CSS in js libraries like ...
2
votes
3
answers
69
views
Matching setState interval with css animation
I am rotating the items in an array of images inside an interval of 5 seconds. Then I have a css animation with styled components that eases in the gallery images with a fade that occurs at the same ...
1
vote
0
answers
24
views
Hover flip cards using Reactjs and styled-components all rotating at once
Disregard the mess, this is my first project using Reactjs.
I created some cards displaying images of Star Wars characters and when hovered they'll flip and display information about said character.
...
0
votes
0
answers
25
views
How to use css modules with react and keep styles in the same (.jsx) file?
I'd like to write my css modules in .jsx file. Similarly to styled-components. Here is an example of what I want to achieve (note that this is a single file):
// Cmp.jsx file
const styles = ???`
....
0
votes
0
answers
18
views
Conditional color on native html selector using styled components
I have the following scenario where I am updating state on button click and trying to change my bg color wether the boolean is true or false. This conditional applies to my "html" selector. ...
0
votes
1
answer
58
views
How to solve Uncaught TypeError: Cannot read properties of undefined (reading 'map') in React
I am new to React and using APIs and struggling to resolve this error. I am trying to display a splide of images using React.js and get the following error:
Popular.jsx:26 Uncaught TypeError: Cannot ...
0
votes
0
answers
25
views
Transient props react warring 'Invalid attribute name'
I'm using transient props from styled-components to prevent rendering and passing them to the elements (https://styled-components.com/docs/api#transient-props)
But React still shows different waring: ...
1
vote
1
answer
49
views
Why aren't my elements centered in my flex container?
I'm building the website for the web development company I just registered (which is also intended to be part of my portfolio for job applications) and on my portfolio page, I'm adding a visual list ...
2
votes
1
answer
49
views
How to globally prefix all css rules generated by styled-components 5.3.5 with a parent class
My app will be loaded into a parent div that has a specific class (e.g. .my-app).
Is there a way to preprend all the classes generated by styled-components with .my-app .
Given a component like
import ...
0
votes
2
answers
42
views
How do I pass a variable/literal for a value in styled components?
I always use props as it's the basic way for managing different use cases, but I'm trying to change border color during the focus state of a styled input (is it possible to assign props to a focus ...
1
vote
2
answers
28
views
Styled compoenents/emotion: add a style object to apply to different components
I create different icons in Emotion (could be Styled Components as well), and I apply the exact styling to each icon:
const BellIcon = styled(Bell)`
width: ${(props) => props.theme.sizes....
0
votes
0
answers
12
views
Emotion/styled components icons - how to paint the inside of icons
(I'm using Emotion but I guess it applies to Styled components icons as well)
Is there a way to paint only the inside of the icon, like in this example:
Stroke/fill will only paint the lines of the ...
0
votes
1
answer
168
views
Could not find a declaration file for module 'styled-components/native'
If you add styled-components to your React Native project, there's a sub-directory for the native components specifically:
import styled from 'styled-components/native`;
export const Container = ...
0
votes
1
answer
83
views
'is defined but never used no-unused-vars', is defined but never used no-unused-vars
I'm starting a small react project (beginner) and when I cut my 'App' component into many small components, such as 'header', it doesn't work. The error started to happen as soon as I cut my header. ...
0
votes
1
answer
23
views
How to style Antd component
I am working on Switch component with antd library. I would like to change background of switch, so I have following code:
import styled from 'styled-components';
import { Switch as SwitchhAnt } from '...
0
votes
4
answers
33
views
Unable to add dynamic style in styled component. I am getting type error
Here I am adding dynamic style to my custom styled components.
<A
href={link || undefined}
style={{ pointerEvents: `${disabled ? 'none' : 'all'}` }}
>
When I use simply ...
0
votes
1
answer
36
views
What is the easiest CSS solution (Sass, Tailwind, styled-components, CSS) to use to support two languages on a website?
I am in the brainstorming phase of a website and trying to select how to write my CSS. The website will support two languages. One language is latin based, think French, and the other is not, think ...
0
votes
0
answers
21
views
How to use Font Awesome Icons is background-image in React
Can someone show me how to use Font Awesome Icons in my SearchBar component below? My intention is to import a Font Awesome Icon an use it as a background0image for the search field
import React from &...
0
votes
0
answers
26
views
How to style two different elements with the same styles in styled-components
<header>
<div class="max-width">
<h1>
<a href="./">
<img src="./assets/Logo.svg" alt="My Blog" /&...
-1
votes
1
answer
20
views
is there any differenc between these two selectors in Styled-components? ">" vs "&" [duplicate]
greater than sign(>) refers to the direct parent.
ampersand sign(&) also does refer to its parent.
const Container = styled.div`
> p{
color:red;
}
`
above equals to this ㄱ
const ...
0
votes
0
answers
7
views
Styled component theme variable organization
This may not be the best place to post this so please let me know if this should be posted elsewhere.
I currently am trying to organize my applications theme, since it has become a bit messy. I was ...