Category "styled-components"

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`

How to target a styled component inside another styled component?

Instead of using div:first-child or div:nth-of-type(2) I would like to say Row or ColSm3 like we usually do in normal CSS, Is it possible to target a styled com

React Boot Strap with React Styled Components

I'm currently porting an old MVC website with Razor pages. I now want to use react with style compoents. Now I am using react on the front end, I want to know w