styled-components Questions

4

I am working through a tutorial where they are using a styled-component. The style is being assigned in the js file after the render and I am getting the Invalid hook call. This is my first react t...
Demosthenes asked 6/2, 2020 at 4:43

4

Solved

I am beginner developer and I am working on react (gatsby, TS, styled components) project. I am getting this error: "React does not recognize the isOpen prop on a DOM element. If you intention...
Aloft asked 27/9, 2021 at 7:31

3

Am trying to use react testing library on my project, but it isn't happy about the theme being passed to styled components in props, and I am getting this error:"TypeError: Cannot read propert...
Emanate asked 14/3, 2022 at 15:16

4

Solved

I have a question about styling an anchor component when it is on the active page. Here is my code: import Link from 'next/link'; import styled from 'styled-components'; const NavStyle = styled.na...
Coconut asked 5/2, 2021 at 10:33

2

I have a historic ongoing battle with styled-components , FlatList and typescript ... Up until now I've been able to make it work with the following : const StyledList = styled(FlatList as new () =...

9

Solved

I'm trying to integrate TypeScript into our project and so far I stumbled upon one issue with styled-components library. Consider this component import * as React from "react"; import sty...
Pannell asked 2/11, 2017 at 14:2

2

Im facing this error when I try to run my Nextjs project using styled components. This is my .babelrc { "plugins": [ [ "babel-plugin-styled-components", { "ssr": ...
Ingaborg asked 7/4, 2023 at 15:1

6

Solved

I came across the .attrs() function in styled components, but I do not understand what it does, or what it does differently? I tried to understand the example in their docs, but as far as I am conc...
Allegro asked 30/5, 2019 at 12:57

2

Anyone know of any plugin or any way of getting VSCode stylelint autofix when using styled-components?
Resilience asked 12/4, 2019 at 22:30

6

I recently moved to monorepo using yarn workspace with an existing react native project. Now, I have one react native project called "timeylo" under "packages/", whose react-native dependencies are...
Yasukoyataghan asked 16/2, 2020 at 8:32

2

Solved

MUI v5.0.0 was released today and in my spike branch I am attempting to update to the new version. I'm working through the steps in the mui-docs detailed here. I am using styled-components with Nex...
Cyrille asked 17/9, 2021 at 4:18

1

I'm trying to integrate Jest, (ts-jest) into my typescript project which uses styled-components/macros. But for some reason, Jest is complaining with the following error: ts-jest[versions] (WARN) V...
Stroke asked 20/5, 2022 at 10:54

4

Solved

When I enter my portfolio it loads the unstyled html page, and only after a few seconds the styles load. How can I resolve this? NOTE: I'm using Styled-Components When I enter the page: After a ...
Exciter asked 29/10, 2022 at 1:59

3

Solved

I tried to override style of component created by standard way of styled-components(styled.) and both the ways(styled() and style.extends) worked for me. But when I am trying to override style of...
Asterism asked 16/8, 2018 at 7:37

1

Solved

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&g...
Capacious asked 30/6, 2022 at 13:58

2

How can I test if my styled-component has a specific CSS attribute-value pair? Let's say my component is the following : const myColor = '#111'; const Button = styled.button` background-color:...
Individuation asked 4/1, 2019 at 10:24

7

Solved

My reactjs styledcomponent contains this code: <a styling="link" onClick={() => this.gotoLink()}> <SomeComponent /> </a> This works fine but the eslint is complaining: St...
Acting asked 20/1, 2019 at 7:39

1

I have the components getting imported from my component library internal to my company. The component library uses rollup: rollup.config.mjs import commonjs from '@rollup/plugin-commonjs'; import ...
Viscometer asked 7/10, 2023 at 18:41

13

Solved

Warning: Received `false` for a non-boolean attribute `comingsoon`. If you want to write it to the DOM, pass a string instead: comingsoon="false" or comingsoon={value.toString()}. How do I pass...
Eirena asked 11/4, 2018 at 20:53

3

I am fairly new to Radix UI (with Shadcn/ui) and styling components for that matter. Couldn't figure out a solution for adapting a JSX component to Radix UI: I am using Radix UI Radio Groups & ...
Blindage asked 26/6, 2023 at 20:55

6

Solved

I am using styled-components and want to target the first child of Text, but am unable to do so. const Text = styled.p` font-size: 12px; &:first-child { margin-bottom: 20px; } `; ... compo...
Geoffrey asked 2/1, 2019 at 15:21

3

Solved

In the development of my landing page ( with next.js ), i decided to use this line of code as a background of a section. background-image: linear-gradient(to bottom, rgb(123, 8, 255, 0.9), rgb(123,...
Atterbury asked 1/7, 2021 at 17:27

6

Solved

How do you set the color of TextInput its placeholder with Styled Components in React Native? I tried the following without any luck: 1. const Input = styled.TextInput` border: 1px solid green;...
Soekarno asked 27/5, 2019 at 17:10

9

Solved

I added the css hover property to disable the button's hover effect, but it seems not work for my case, how should I fix this? import Button from 'material-ui/Button' import styled from 'styled-co...
Anthem asked 10/5, 2018 at 2:32

8

export enum SizeEnum { Small, Large } export interface ICheckbox { Size: SizeEnum; } const Box = styled.div` height: 20px; width: 20px; ` In the above code I want to be able to conditional...
Zirkle asked 10/4, 2018 at 5:0

© 2022 - 2024 — McMap. All rights reserved.