Category "styled-components"

How to change styles of react component using styled components

I have this React component which is a simple button component: const Button = ({ children }) => <button>{children}</button>; I tried to pass th

How to pass redux props to styled component in react typescript

i'm pretty new to typescript and there's something that is not very clear to me. I'm trying to pass a prop to styled-component file, the prop arrive from redux

How to add an active class to an active Link in react router dom v6.3 using styled components - ReactJs ^18.1.0

I have designed my NavLinks using the styled-components. I want to add an active class to the active link I am unable to do it. I tried the isActive property bu

Can I extend components of this type - PaperTextInput.Icon or Tab.Navigator when using styled components?

I've been trying to extend components like PaperTextInput.Icon or Tab.Navigator but have been failing and I'm wondering how am I supposed to extend them? What I

Can't resolve font path using styled-components

I am trying to include a google font Epilogue to my project using @font-face and styled-components. I created GlobalStyle.style.jsat the /src folder and importe

Background Image is not showing from a figma design

below is a figma desing im trying to convert to a react component , the issue that i have is the blue background (which is an image) is not displaying , please

How can i use css root variable in ternary operator at styled-component?

I'm using React with Typescript and I wondering how to use var(--color-primary) instead of "005fcc" In ternary operator at styled-component. This is separated s

How do I style a component that has `styled-components` nested in it?

I am new to styled-components. I'm trying to set styles for MyComponent to apply to styled-component. export const Relative = styled.div` position: relative;

Omit specific prop from an emotion styled component?

I have a BoxWithAs component, defined something like this: const BoxWithAs = styled.div( { WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'g

Using rgba in box-shadow with styled-components not working

I have this code: const Test = styled.img` width: 48px; height: 48px; border-radius: 50%; box-shadow: 0px 0px 0px 1px rgba(27, 31, 36, 0.15); `;

switch statement evaluating incorrectly in styled-components

I have a custom <Button /> component that properties like color, hasBorder, and outlined in its styled-component If I do the if statement like this, it is

How to write a TypeScript NPM package with JSX property suggestion/autocompletion for intellisense

I created a mini UI library and published it to NPM registry. My library is written with strongly typed styled-components (TypeScript) and can be imported in Re

flex row exceeding page width, text-overflow: ellipsis not working

my apps flex capabilities have changed since adding some code. In my MovieContainer ideally I want the flex-direction to be row (it's currently set to column) a

Material UI + styled with props throws "React does not recognize zIndex prop on a DOM element."

I'm struggling with React error -> React does not recognize zIndex prop on a DOM element. It happens when I'm using MUI component and Styled with props. Code

Problem with styled-components running React 18 and Next.js. Module not found: Can't resolve 'process'

I have to use React 18 for Suspense in a three.js/next/ts project (I have tried using next/dynamic and it does not work). So I installed it and updated everythi

How is it possible to create a circle in CSS that always keeps the same size?

I have the problem that I have a circle that adjusts according to the content of the text. However, I would like the font size to adjust to the circle and not h

Button text won't be displayed properly in browsers other than Firefox

So I'm studying javascript and I had to do Pokemon-themed app. My goal was to create a Pokeball shaped button and it looked actually pretty decent, but then I d

Equivalent of scss @import for styled-components?

I'm making an embeddable widget with react and styled-components, and want to do a big CSS reset in my main app container. I'm going to use the styles from clea

How to style react styled components using classNames

How to style a styled component based on the class name it has. I found the following implementation through some blogs, but this isn't working. Can someone hel

How to use 'not' pseudo-class in styled components

I want to apply styling to all divs that are not children of 'thirdParty' container. To do this, I expected this to work: const GlobalStyle = createGlobalStyle`