styled-components Questions

3

Solved

My use case is probably a bit unique, but I am creating a dynamically-sized square grid using DOM elements encased in a flexbox. Each DOM element has an SVG image background and a height/width equa...
Fertilizer asked 18/5, 2017 at 6:28

1

I am building an application using react and material-ui. Material-ui components comes with its custom classical blue-grey google style colors and I want to modify all of them with my custom ones. ...
Ira asked 26/4, 2022 at 16:25

3

After learning a bit of CSS and flexbox, I am trying to build a Landing brochure site. On the journey of building one, I have faced one issue that I couldn't troubleshoot on my own. I am trying to ...
Medicaid asked 14/1, 2022 at 3:31

3

Is it possible to do transitions in react native using StyleSheet or styled-components? I am trying the following with no luck. import React from 'react' import styled from 'styled-components/nati...
Catherine asked 24/2, 2017 at 11:31

5

VScode intelliSense is way too slow when working with a certain TypeScript, NextJs project. The problem seemed to be the node_modules folder, when i delete node_modules the intelliSense seem to be ...

3

I'm having issues with enabling styled-component's css prop in TypeScript as soon as I import something from Storybook, because Storybook depends on @emotion/core, whose type declaration defines Em...
Bildungsroman asked 1/3, 2021 at 13:25

11

Solved

I'm using CRA with Material-ui and Styled Components type of styling. When building my CSS I want to access Material-ui's default theme. part of package.json: "dependencies": { "react": "^16.8....
Propulsion asked 19/7, 2019 at 8:38

3

Solved

How is this TS issue resolved? My styled component is exported from a style.ts file and used inside the index.tsx file of my React component: style.ts: import { styled, Theme } from '@mui/material/...
Charmion asked 20/9, 2022 at 11:45

7

Solved

How can I use conditional rendering in styled-components to set my button class to active using styled-components in React? In css I would do it similarly to this: <button className={this.sta...
Monty asked 29/1, 2018 at 13:40

6

Solved

Material UI has a nice set of built-in media queries: https://material-ui.com/customization/breakpoints/#css-media-queries Material UI also allows us to use Styled-Components with Material UI: htt...
Stratiform asked 26/1, 2020 at 19:21

10

Solved

Getting a typescript error on my styled-component Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559) import React from 'react' import { Notifica...
Membrane asked 12/3, 2019 at 20:11

7

Solved

I've recently decided to move my codebase from JS to TS to add Type checking. I also use the styled-components library. However, i'm running into the following issue: error TS2322: Type '{ children...
Ruhr asked 26/11, 2021 at 16:33

4

Solved

I am trying to use the styled-components-babel-plugin with a create-react-app application, to get the components name as classname in my chrome dev tools. But somehow, i do not get the classnames t...
Candlepin asked 26/12, 2017 at 0:39

4

I am trying to have custom width for antd tooltip component: Link to docs How can this be done ? import React from "react"; import ReactDOM from "react-dom"; import "antd/d...
Pollerd asked 19/8, 2020 at 18:48

5

In my NextJS React app when i change something in the code, the HMR works and shows the correct update but if I refresh the page, this error comes up again. This happens on dev mode. Noticed where ...
Socinian asked 13/10, 2020 at 13:38

0

I've been working on a React Native (CLI) project for a few months, and it's almost ready for release on mobile. Now, I need to make the project run on browser as well, for that I'm trying to use &...
Correlation asked 5/3 at 22:54

4

Solved

I have a Button component (in React) which can either be a button or an a element, depending on if a href prop is passed to the component. Something similar to below: const Button = ({ children, h...
Luetic asked 30/4, 2020 at 8:31

20

I use this code to margin my Button from top: const makeTopMargin = (elem) => { return styled(elem)` && { margin-top: 1em !important; } `; } const MarginButton = makeTopMargin(But...
Nationalism asked 10/8, 2018 at 17:9

16

Solved

I'm using styled-components with next.js so my styles need to be server-side rendered, hence how can I add google analytics to my website? I checked next.js google analytics example but as I said ...
Kwangchowan asked 26/2, 2020 at 10:4

6

Solved

I have following code and I want to pass value of y from react component to moveVertically keyframe. Is it possible to do so ? import React from 'react'; import styled, {keyframes} from 'styled-c...
Derogatory asked 11/6, 2018 at 16:55

2

Solved

the component is being rendered before styling at a certain time I want to render the styled-components on the server side
Watthour asked 1/2, 2023 at 14:7

3

I am trying to add a thick solid stroke to some Text in React Native. I've added a snippet with the desired CSS. I've tried directly applying the CSS via styled-components but I get an error stati...
Margaritamargarite asked 24/2, 2020 at 13:44

3

Solved

I wanted to crop my background on mobile phone so the user cant scroll horizontally, it works fine when i use responsive design mode on web browser : But when i open it on my mobile phone , it sho...
Haymo asked 28/5, 2021 at 9:38

3

I'm trying to load local font like the code below but I keep getting Cannot find module '@/landing/fonts/Gotham-Bold.ttf' error and have no idea what is really wrong this path. my folder structure...
Jubilant asked 28/2, 2019 at 10:14

4

Solved

I'm running into the following error when testing my application using jest: FAIL ● Test suite failed to run Cannot create styled-component for component: undefined. 30 | 31 | > 32 | e...
Nomenclator asked 14/4, 2022 at 18:38

© 2022 - 2024 — McMap. All rights reserved.