styled-components Questions
6
I am very new to next.js. Using it for the server side rendering of my application.
According to the documentation you can import css files from a static folder which should be in root directory b...
Hesper asked 19/7, 2017 at 13:28
6
I'm trying to use jest-dom to test a component's styles, and I'm having the error:
"TypeError: expect(...).toHaveStyle is not a function"
My component is a simple link with styled-compon...
Specification asked 24/11, 2020 at 14:19
3
Solved
How would I go about styling something like the react-datepicker with styled-components? The datepicker library looks like it uses some type of BEM style (screenshot below) which I would normally j...
Metalinguistics asked 25/7, 2017 at 11:9
5
Solved
If I have the following button with a defaultProp
export interface IButton {
variant: 'action' | 'secondary';
}
export const Button = styled('button')<IButton>`
background-color: #fff;
...
Cychosz asked 7/9, 2018 at 16:41
2
Am I able to use transform in styled-components in React Native?
I define the styled component like this:
const StyledAnimatedView = Animated.createAnimatedComponent(styled.View<
ViewProps
>...
Desertion asked 4/12, 2020 at 10:32
6
Solved
I am using styled-components and am trying to set a background image like so
const HeaderImage= styled.div`
background-image: url('../../assets/image.png');
';
I've also tried without the quot...
Christiansen asked 27/12, 2016 at 13:49
7
Solved
I am trying to get styled-components to take an SVG that is a react component and set it as a background-image but I get the error:
TypeError: Cannot convert a Symbol value to a string
SVG co...
Emergent asked 9/7, 2018 at 11:27
2
Solved
When styling a React Native app with Styled Components 5.x I'm getting the warning...
Expected style "borderWidth: 2" to contain units.
This didn't happen with previous versions.
What doe...
Wellappointed asked 18/11, 2019 at 21:20
4
I am running into the following Error while following this tutorial https://www.youtube.com/watch?v=QiTq5WrWoJw&t=8176s
I am having issues connecting my individual messages into my firebase app...
Nepil asked 13/3, 2021 at 15:55
3
I'm using @emotion/react to theming and injected theme into it, I'm able to access theme using useTheme into component but not able to access theme into styles using @emotion/styled. Any help plea...
Amby asked 26/10, 2021 at 6:38
3
const Button = styled.button`
display: inline-block;
width: 300px;
background-color: black;
`
const ButtonHref = styled.a`
${Button}
`
So I have two styled-components. I want to inherit 'B...
Semolina asked 30/4, 2019 at 8:28
3
I have a Next.js app using styled components. On first load of any page, there are no complaints, and everything looks properly styled. When I refresh a page however, everything still looks proper,...
Cooperman asked 8/11, 2020 at 16:49
6
Solved
I want to change the backgroundImage dynamiclly, when i try it follow as, it did not work,but when i open the devtools in chrome, can show that background
<RecommendWrapper>
<RecommendIt...
Hafiz asked 25/12, 2018 at 7:51
3
Solved
I have a simple component
Here are 2 version of it - with and without styled-components:
Without Styled Components
<div id="container">
<div id="kid"></div>
</div>
#con...
Lynseylynus asked 11/7, 2017 at 13:47
5
I have a styled component that is extending a third-party component:
import Resizable from 're-resizable';
...
const ResizableSC = styled(Resizable)``;
export const StyledPaneContainer = Resizable...
Soapstone asked 14/4, 2018 at 17:31
1
How do I enable syntax highlighting for emotion template string css in VS Code? All the plugins I find are for snippets.
It works with css({ camelCaseCssProps:...}) but I am trying to use css...
Excrement asked 25/11, 2021 at 8:47
6
Solved
What is the proper way to apply :before and :after pseudo classes to styled components?
I know that you can use
&:hover {}
to apply the :hover pseudo class to a styled-component.
Does thi...
Wish asked 24/8, 2017 at 21:50
6
Solved
I'm building a bundle with rollUp using styled-components.
My rollup.config.js looks like:
import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import commonjs...
Rising asked 28/4, 2018 at 20:43
1
Solved
I have this in some parts of the code:
import React from 'react'
import styled from 'styled-components'
type PropsType = {
direction?: 'horizontal' | 'vertical'
flex?: number | string
width?: n...
Burlburlap asked 18/9, 2022 at 20:12
4
Solved
I have an SVG I'm using as an <img> tag. Using Styled Components I am trying to get to a point where I change the stroke color upon hover.
I imported the SVG:
import BurgerOpenSvg from '.....
Ferrol asked 20/6, 2019 at 19:36
1
I'm Building a NEXT js app and I got this error ....
And also I used styled-component and imported that file to my responsive card file.
error - Error: Element type is invalid: expected a string (f...
Hacienda asked 15/9, 2022 at 15:5
4
Solved
The Problem:
When I create a simple View with this style in react-native using styled-components:
const Container = styled.View`
flex: 1;
background: linear-gradient(#006ded 0%, #1bace2 34.48%,...
Eliseoelish asked 25/9, 2019 at 20:49
3
Solved
According to styled-components doc's I can refer to another component to trigger, for example, a hover effect.
const Link = styled.a`
display: flex;
align-items: center;
padding: 5px 10px;
bac...
Constellation asked 23/8, 2017 at 13:34
2
Solved
I have a grid that for large screens (@media (min-width: 800px)) uses a grid of 12 columns with the next directive:
grid-template-columns: repeat(12, [col-start] 1fr);
But for mobile devices I u...
Quenchless asked 21/11, 2018 at 8:13
1
I've been trying to get the babel-plugin-styled-components plugin to work with my webpack/babelrc configuration but I have not been able to do so. I am using babel-loader and no matter what I try I...
Herringbone asked 17/11, 2020 at 17:14
© 2022 - 2024 — McMap. All rights reserved.