Posts
Chat
Members
Info
June 25, 2020 at 2:43am
June 26, 2020 at 7:24am
June 30, 2020 at 7:31am
which one will have more specificity for styles
const Label = styled.div`color: blue;`const InputWrapper = styled.div`& .Label: {color: green;}`const Container = styled.div`& .Label: {color: red;}`<Container><InputWrapper><Label className="Label">some text</Label><input /></InputWrapper></Container>
July 28, 2020 at 10:17am
September 6, 2020 at 8:57pm
Hello, I need your help please. I work with styled system with styled components and I don't understand how shouldForwardProp works
what is it supposed to do ? Forwarding props ok but I don't understand it
September 14, 2020 at 12:29pm
I'm using Gatsby with Styled-components and theming but the props defined in theme obj are under
props.theme.default['']
, and in all doc I saw they are under props.theme['']
any help or idea to correct it, thanks
September 17, 2020 at 6:35pm
Hi all, qq here. Is this the expected way to type your props in typescript to get a theme to pass through?
import styled, { DefaultTheme, ThemeProps } from 'styled-components';interface MyProps extends ThemeProps<DefaultTheme> {isActive?: boolean;}const MyComponent = styled.div<MyProps>((props: MyProps) => {return {color: props.theme.primary,"::before": { .. }}}
September 19, 2020 at 1:18pm
With the above code Typescript is fine. I'm saying without extends ThemeProps, then Typescript will show a squiggly line under
primary
in props.theme.primary
.I'm just wondering if anyone else here is using Typescript with styled-components and if this ^ is how they're handling this case.
September 20, 2020 at 3:34am
So DefaultTheme is typed as {}. Here's what their d.ts says:
/*** This interface can be augmented by users to add types to `styled-components`' default theme* without needing to reexport `ThemedStyledComponentsModule`.*/// ...export interface DefaultTheme {}
You'll want to build a type for your
theme
object that extends DefaultTheme
and pass that insteadSeptember 20, 2020 at 9:06pm
So DefaultTheme is typed as {}. Here's what their d.ts says:
/*** This interface can be augmented by users to add types to `styled-components`' default theme* without needing to reexport `ThemedStyledComponentsModule`.*/// ...export interface DefaultTheme {}
You'll want to build a type for your
theme
object that extends DefaultTheme
and pass that insteadYup, already doing that as described here: https://dev.to/rajuashok/create-styled-d-ts-to-make-typescript-work-with-styled-components-5dk4. Cool thx!
October 3, 2020 at 8:47am
Howdy,
Anyone using Ant Design (https://ant.design/) with styled-components? I'm migrating over from Material-UI where integration was easy. It seems like I'd need to know internal class names for Ant Design and use it like that accordingly.
October 5, 2020 at 11:50am
November 8, 2020 at 12:27pm
November 18, 2020 at 2:56pm
January 8, 2021 at 5:16pm