styled-components Questions

3

Solved

I can get media queries to work properly inside a regular styled-components component however when I attempted to use it in a keyframe (via import from styled-components) it does not seem to work a...

2

Hi everyone im in trouble with active Link, i use Styled Component. I want my link to be Red when i'm on active link but nothing work. I tried ActiveCLassName but this not work too. can someone hel...
Lobelia asked 19/8, 2022 at 16:37

2

Solved

It works when I manually resize the window, but not when the content height changes which is what I need. Am I doing something wrong? class MainContainer extends React.Component { constructor(prop...
Leyba asked 17/2, 2022 at 15:58

3

I have this file in a react native project: import styled, { withTheme } from 'styled-components'; import { BaseText } from '../BaseText'; export interface BodyProps { textAlign?: string; fontSi...

1

Solved

I have: const FooterBox = styled(Box)` background: #4e738a; left: 0; right: 0; bottom: 0; width: 100%; color: #ffffff; ${p => p?.theme?.breakpoints.up('xs')} { margin: auto; display: ...
Sandler asked 27/7, 2022 at 14:51

5

I'm using global style from styled components with next.js and every time I reload my page I can see the font flickering. I have my font files in public/fonts/Inconsolata I've looked everywher...

2

Solved

I'm using Styled Components in React and I can create a component like so: export const Screen = styled.div({ display: "flex", }); I then include it in my render code like this: <Scr...
Certifiable asked 30/7, 2022 at 3:46

2

I'm having the following issue when trying to load Google Fonts. I read that I'm supposed to write something like this in _document.js to import it inside a head tag import React from 'react'; impo...
Halfblooded asked 14/8, 2020 at 0:43

3

I'm having problems understanding nesting in styled components, i have a code i need to implement in my project but i don't fully understand how to write the same stuff with styled-comp. due to nes...
Dubitable asked 29/4, 2019 at 15:42

3

I am having difficulty using refs with Styled Components. When I try to access them in my class methods like below, I get the following error: Edit.js:42 Uncaught TypeError: this.....contains is...
Rowan asked 12/6, 2018 at 15:22

2

Solved

In the bellow React component, I'm using styled-components library for the purpose of styling. import React from 'react' import jsonResponse from '../data' import styled from 'styled-components' ...
Transfix asked 1/11, 2019 at 12:0

3

Solved

trying to port some code from jss to styled-components, jss code looks something like: //... const styles = { myStyles: { color: 'green' } } const {classes} = jss.createStyleSheet(styles).atta...
Windsucking asked 2/4, 2018 at 21:21

2

I'm trying to create a wrapper for my styled component but I'm having trouble getting the types right. Let's say I have a styled component like this: const Button = styled.button<ButtonProps>...
Glossy asked 8/1, 2021 at 7:49

1

Solved

I'm using MUIv5 and looking at this documentation, it's still unclear the difference between @mui/material vs @mui/system. This is mainly in the context of using the styled(link) utility. I've noti...
Martinmartina asked 12/7, 2022 at 1:20

3

I'm a developer of a fairly large react application. A part of the application is a detail form that is loaded dynamically and can consist of about 100 input fields of different data types (differe...
Berlinda asked 11/2, 2020 at 14:57

1

Solved

It's fine locally (known warning and CSS renders well), but on Vercel my Remix app gets this error: Hydration failed because the initial UI does not match what was rendered on the server. Busines...
Stylopodium asked 25/6, 2022 at 14:14

1

I'm working on a website using React and Styled Components. However website is very slow on mobile and warnings appears in Google Chrome console: [Violation] Long running JavaScript task took 30...
Chilblain asked 18/3, 2020 at 7:49

7

Solved

I just read in the styled-components documentation that the following is wrong and it will affect render times. If that is the case, how can I refactor the code and use the required props to create...
Nobleminded asked 13/9, 2018 at 20:42

6

I'm using styled-system and one key of the library is to use the shorthand props to allow easy and fast theming. I've simplified my component but here is the interesting part: import React from '...
Puffery asked 10/12, 2018 at 18:20

7

Solved

What is the best way to handle hovers in styled-components. I have a wrapping element that when hovered will reveal a button. I could implement some state on the component and toggle a property on...
Fulgor asked 6/12, 2016 at 23:51

2

Solved

I am trying to add class names to a React Component to make it easier for me to customize that component using Styled Components. Here is a simplified outline of the component: const SignupForm = ...
Lickerish asked 15/1, 2020 at 17:25

6

What is the best way to create variants using styled components? Heres what i am currently doing. const ButtonStyle = styled.button` padding:8px 20px; border:none; outline:none; font-weight:${...
Gerstner asked 31/8, 2020 at 1:7

3

Solved

I'm working with the React Native Web and React Native Paper library with Styled Components. Basically I would like to customize the TextInput inner components: Label and html input The questions ...

2

Solved

I'm using Material UI components and MaterialTable and I want to stylish the components using StyledComponents But I not been having the desired results when I try to apply styles using StyledComp...
Prostate asked 14/8, 2019 at 17:58

3

Solved

I have a question with StyledComponents, it's possible to create a style using a React.Fragment or any other existing component? I use this example (The intention is the Style ContainerFragment pa...
Vampire asked 14/8, 2019 at 17:33

© 2022 - 2024 — McMap. All rights reserved.