menu

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# Help
view-forward
# jest
view-forward
# Off Topic
view-forward
# Website
view-forward
Team
Posts
Chat
Members
Info
Show previous messages

May 13, 2020 at 7:20am
Truth be told, I haven't come across a nested SC being extended by styled(), so I wouldn't know. My best guess is that you'd have to pass such a prop explicitly.
  • reply
  • like

May 25, 2020 at 7:10pm
hi. I've got a question. is it possible to use decimal units like 0.3cm or 33.05mm in css ?
  • reply
  • like
Hey, maybe you can try to read this. CSS UNITS
  • reply
  • like

May 26, 2020 at 6:47pm
Trying to get some help with https://github.com/styled-components/styled-components/issues/3137. This seems like an important regression from v3 to v4/5. Is there some accepted workaround people are using?
  • reply
  • like

June 11, 2020 at 4:36pm
How to write style with parent class in styled component
  • reply
  • like

June 25, 2020 at 2:43am
I want to set some prefix in class name generated by styled-component. Like instead for this sc-AxirZ I want like style__ContainerWrapper-sc-AxirZ , is this possible?
Edited
  • reply
  • like

June 26, 2020 at 7:24am
Yes, you need babel plugin for this
Edited
  • reply
  • like

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>
Edited
  • reply
  • like

July 28, 2020 at 10:17am
Moved to #help
Edited
  • reply
  • like

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
  • reply
  • like
what is it supposed to do ? Forwarding props ok but I don't understand it
  • reply
  • like

September 14, 2020 at 12:29pm
hi all, i'm new here, but with Q's, :)
  • reply
  • like
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['']
  • reply
  • like
any help or idea to correct it, thanks
  • reply
  • like

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": { .. }
}
}
  • reply
  • like

September 19, 2020 at 1:18pm
Are you receiving any feedback from typescript, or not receiving tooling that you are expecting?
  • reply
  • like
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.
  • reply
  • like
I'm just wondering if anyone else here is using Typescript with styled-components and if this ^ is how they're handling this case.
  • reply
  • like

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 instead
Edited
like-fill
1
  • reply
  • like
Hi guys. Is there a way to access global styles from within a component. This is possible in other frameworks using :global()
I am trying to achieve the following:
const Foo = styled.div`
background-image: URL(/image.webp);
:global(html.no-webp) {
background-image: URL(/image.jpg);
}
`
Edited
  • reply
  • like

September 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 instead
  • reply
  • like