4,598 questions
1
vote
0
answers
2
views
Hydration Fail NextJS 15 and Styled Components
I keep getting the hydration failed error when using NextJS v15 and StyledComponents (see image attached).
Here is the repo if anyone wants to check :
https://github.com/mr-greg/portfolio-v2
I have ...
- 11
0
votes
0
answers
19
views
Semi circular gauge progress bar in react
enter image description here
I want to make semi circle gauge chart(progress bar) shown in the image above.
here are the key requirements:
A semi-circle shape with a progress bar that fills the ...
- 1
0
votes
0
answers
28
views
Styled Components DefaultTheme Disallow Additional Properties
I am using styled-components and have defined a theme type in a root-level .d.ts file as so:
import "styled-components";
import { CSSProperties } from 'react';
type RequiredCSSProperties = ...
- 145
0
votes
0
answers
16
views
Styled components with react-native and typescript props
Hi I'm currently migrating a react-native project to use Typescript.
I have a lot of styled components which use props like this one :
export interface LinkStyledProps {
color: string;
...
- 11
0
votes
0
answers
27
views
Upgrading to MUI 5 with styled components issues
My main issue after upgrading is that default styles part of MUI doesn't seem to get applied.
Here is a button in devtools. It has the MuiButtonBase-root and random style names (DPUOvl). It is missing ...
- 21
0
votes
1
answer
34
views
Generate nested-variable with style-dictionary
I'm using Style Dictionary to generate a theme.js file from JSON tokens. However, the output is flat, and I want to preserve the nested structure of the tokens.
Here’s an example:
Input (tokens/colors....
- 1
0
votes
1
answer
32
views
Next js + styled components hydration error
I'm trying to combine styled components with next js, I created a homepage and wanted to add a footer and navbar, but not only on the homepage but also on other pages. Whenever I add a navigation bar ...
- 21
0
votes
0
answers
36
views
Determine when Parent is Flex or Grid to specify the typescript types autosuggestion
I am using @emotion/styled and I've encountered an issue I cannot resolve. I have two styled components, <Flex> and <Grid>.
What I'm trying to achieve is for <Flex> to detect whether ...
0
votes
0
answers
15
views
css shadowEffect differences on web vs mobile (React Native)
I am building a React native application and working on the tabs style. A Tab.Screen looks like this:
<Tabs.Screen
name="events"
options={{
title: "Events&...
1
vote
1
answer
50
views
How to keep the logo in the center of the video component in any resolution of the screen
I have a React component that has a video with a company logo in the center, but when I switch to a responsive screen like a cellphone the logo keep getting out of the video, how do I fix this?
PC ...
0
votes
0
answers
24
views
Apply active class to React side nav using IntersectionObserver. Intersection is not capturing correctly
Issue: Works fine while scrolling bottom to top, but not otherwise
Problem:
I am using smooth scrolling for navigation in my app, and everything works perfectly when scrolling from bottom to top. ...
0
votes
1
answer
47
views
Prop Required for Styled Component Despite Being Specified with attr
I created a basic icon component that extends SVG from react-inlinesvg with styled-components to allow for custom styling props. In addition, an attr call specifies the src property to the SVG ...
- 145
0
votes
0
answers
37
views
Next.js turborepo + styled-components + package ui-kit
I am using NextJs and styled-components in my project.
I am using styles registry for my app from next js docs: https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-...
0
votes
0
answers
34
views
How to prevent MaterialUI react components from injecting <style> tags into the <head> tag
I recently added MaterialUI to my react project and I'm seeing a bunch of tags showing up in the tag and it's causing problems with my content security policy.
- 179
0
votes
1
answer
118
views
How to change drag preview of a styled component, using pragmatic dnd?
I'm using Pragmatic DnD and am looking at the method onGenerateDragPreview, but the docs don't really show any way to re-render the component being dragged in order to send a prop to my styled ...
- 26k
1
vote
0
answers
29
views
Page auto-scrolls too far down when focused on input fields, creating black space and not scrolling back up
I am building a webpage using a flexbox layout and I am having some issues with scrolling for the mobile view when I am focused on an input field.
When I am focused on only input fields and scroll my ...
- 11
0
votes
0
answers
35
views
CSS Grid area issue with React components
Even though I have set up the grid areas as shown below, the Cost Meter component is not appearing directly below the Electricity Meter as intended, and the alert now appearing on the right side. I am ...
- 131
0
votes
1
answer
73
views
Copmparing the height of two div's
I have a list of object testList and would like to compare the offsetHeight difference betweeninnerRef and outerRef.
I am not sure why the outerRef offsetHeight value is always smaller than innerRef ...
- 527
1
vote
0
answers
77
views
TSelectionPoint color
TSelection has a Color property that enables us to change the colors easily.
TSelectionPoint does not have a Color property. I want to change the color of the circle even when it is not active.
sp1....
- 735
0
votes
0
answers
28
views
react-native Card component with cutout
I need to create a card component, but I know how to add an inset cutout. It may be necessary to use react-native-svg lib, but I am not sure. It's like a separator between the header and the dynamic ...
- 426
0
votes
1
answer
53
views
CSS transition is not working on emotion styled component
I have a problem with css transition.
When the selected state value changes, the CSS width changes. I want to apply a transition effect to the width, but if I use a styled component, the transition ...
0
votes
0
answers
70
views
Can't type into Mui DatePicker
I'm using Mui's DatePicker, but I can't type into it, because the date ends up being wrong, I can only select. I wanted to be able to write in it too, because it's easier, but when I want to type the ...
- 1
0
votes
0
answers
23
views
Custom uikit library, how to create a good reusable modal component with createPortal()
actually i'm working on a custom uikit library for React, and i wrote a lot of reusable component.
Now i want to create a good reusable Modal component, that must be rendered always on top of all ...
- 133
0
votes
0
answers
36
views
Why are props in my generic component accepted by TypeScript only if I specify their type explicitly as "object"?
I've been trying to implement a component in React which can be either a link or a button. If the value of "as" prop equalts to "button" then it is a button and hence accepts all ...
- 1
0
votes
1
answer
48
views
applying the same selectors on sibling have a slightly different behaviour
In my app, I have a component in which there are only two cards and I want to animate them when they are hovered and clicked.
I noticed that when one of them is currently active (clicked) the other ...
- 123
0
votes
1
answer
125
views
styled-components are not loaded the first time, reloading the page fix it
I have a website with mixed usage of wordpress and react.
The react part has a big usage of styled-components.
Usually the react part is reachable with a normal <a href> link from the wordpress ...
0
votes
0
answers
35
views
Dropdown Menu Not Staying Fixed With Button on Scroll
I'm building a dropdown menu in React, and I'm facing an issue where the menu doesn't stay fixed relative to the button when the user scrolls the page. Instead, the menu scrolls with the page, which ...
0
votes
0
answers
24
views
How to read prop value inside pseudo element in styled-components? [duplicate]
I've been trying to read the value which was passed down by a prop. I'm trying to read it inside ::before pseudo element:
Button/index.tsx
export const Button: FC<ButtonProps> = ({children, ......
1
vote
1
answer
48
views
How to use mui styled on react components and to change style inside the wrapped component?
In the code below: How can I change the border-bottom property inside Header inside SpecialTabs ith styled?
Thanks!!
const SpecialTabs = () => {
const Header = styled.div`
position: relative;
...
- 51
1
vote
1
answer
23
views
Styled components typed by interface error
I using SC with react, decided to type an element with interface, but this error occurs:
react-dom.development.js:86 Warning: Received `false` for a non-boolean attribute `completed`.
If you want to ...
0
votes
0
answers
52
views
Space between Text and Icon is not consistent in Input Date (React - Styled Component)
I have two input date attributes. I want to set the space between the text and the icon to 0.
My problem is that my CSS code (styled component) works for the first attribute but not for the second (...
- 41
0
votes
1
answer
42
views
Override style of children elements of one component again using StyledComponents when using them in another component
I have a Component like
const CalendarComponent: React.FC = () => (
<DropdownContainer>
<CustomDropdown>
<span>{label}</span>
<ArrowIconContainer>
...
- 11
2
votes
1
answer
65
views
Custom props not being passed through a React component with extended styles
I have this Button.jsx file which exports a <Button /> component, that wraps a <StyledButton /> component.
(I need this wrap to handle extra props like loading and spinner)
The <...
- 23
2
votes
1
answer
320
views
How to make styled-components work with Astro ? __vite_ssr_import_0__.default.div is not a function when using styled-components in Astro project
19:54:29 [ERROR] vite_ssr_import_0.default.div is not a function
Stack trace:
at C:\Users\prash\OneDrive\Desktop\tac-website\src\styles\Header.js:3:42
[...] See full stack trace in the browser, or ...
0
votes
0
answers
43
views
Unable to test a component which is wrapped in a styled component
I'm writting a test case to my component. As below
render(<DetailsPage/>);
expect(screen.byTestId("details-wrapper-select")).toBeInDocument();
Then I'm getting Below error:
console....
0
votes
0
answers
26
views
styled-component: Elegant way to trigger child style from parent
I have a Parent wrapping a Child. Upon Parent:hover, I want to trigger the Child:hover effect.
Desire 1: Parent should not have to know/care about what the Child is made of, or how it is styled.
...
- 599
0
votes
1
answer
53
views
Rollup and babel does not transpile cssprop to styled component
I'm developing a React component library for npm. The tech stack includes:
React
TypeScript
styled-components
I'm using Babel and Rollup for the build process.
My issue is that I want to use the css ...
- 21
0
votes
1
answer
37
views
babel-plugin-styled-components works well with NODE_ENV=development but not with NODE_ENV=production in React app
I am facing the following situation in my React App. I use babel-plugin-styled-components. When NODE_ENV!==production classes are generated and injected in the head tag and used by the React ...
- 23
0
votes
0
answers
26
views
React Modal Transition working on exit, but not on entrance
I created a custom Modal component in React for creating popup modal dialogs. I am using react-transition-group to try and "zoom-in" the modal when it first shows up and "zoom-out" ...
- 11
0
votes
0
answers
16
views
how to style images in styled-components
these are my images in my React.js app:
<img className="mobile-image" src={MobileImage} alt="mobile image" />
<img className="desktop-image" src={DesktopImage} ...
0
votes
0
answers
28
views
React application not correctly "pathing" my image
I have a React application created using Vite. I am also using Styled Components. Everything works fine, except when I specify my background image, it is not creating a correct path.
As you can see, ...
- 11
0
votes
2
answers
208
views
Styled Components styles are not applied
I've a react popup which uses styled-component for styling. I'm rendering the react app in shadow dom. Because I didn't want any other css file to modify the popup. It is working on most sites except ...
- 73
0
votes
0
answers
17
views
Styled Components overlay blocks form element on iPad only
I was developing a login/signup page using a template or code done using styled-components library online; however, the strange thing is this works for all my devices, at also at different screen ...
- 15
0
votes
1
answer
91
views
Make left column of table sticky using React Styled Components
Using styled components, I have created the following styled elements. My objective is to make the first row and column "sticky", so when the user scrolls through the table they always ...
0
votes
0
answers
99
views
How to make a section sticky with links react-intersection-observer
I've experimented a bit with react-intersection-observer but I'm quite new at it and doesn't seem to grasp how to make the stickyness smooth in mobile.
I have a sticky section containing a couple of ...
- 1
0
votes
0
answers
137
views
NextJS Optimizing Pagespeed TBT Mobile
I have my NextJS+TS (App Router) + Styled Components app in production with Vercel+Cloudflare, and I'm seeing good results (95+) on all metrics on desktop when using https://pagespeed.web.dev/. But on ...
- 27
0
votes
1
answer
80
views
How to change the styling of FloatButton from AntDesign?
I am trying to customize my FloatButton component some custom CSS and can't find out how to do it for the background color and for the Icon that is displayed in it. I tested with this code but it ...
0
votes
0
answers
53
views
The getStyleElement() method of ServerStyleSheet returns an empty style
Question
We upgraded our Yarn version from 1.22.19 to 4.3.0 and TypeScript from 4.8.4 to 5.4.5, while keeping the styled-components version unchanged and updating other modules.
Since this upgrade, ...
- 21
0
votes
1
answer
130
views
How can I set a custom header for a MUI DateCalendar in order to make it collapsable?
I'm trying to customize the MUI's DateCalendar component, expecting to add a new iconbutton in it's header, that may collapse its content when clicking it.
Such as this:
I managed to do everything, ...
0
votes
0
answers
44
views
react-native App with Expo crashes only in iOS
This RN Component:
import { getRandomColor } from '@shared/lib/helpers'
import { AvatarContainer, InitialText } from './styles'
export const InitialAvatar = ({ name }) => {
const ...
