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

June 11, 2020 at 4:36pm
How to write style with parent class in styled component
  • reply
  • like
something like this?
Edited
  • reply
  • like
  • 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

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

October 5, 2020 at 11:50am
Trying to use background-image: linear-gradient(...) but vendor prefixing doesn't seem to work.
  • reply
  • like

November 8, 2020 at 12:27pm
Hi. There are 3 ways to write styled-components Tagged Template Literals, Style Objects and the third one
const Button = styled.button((props) => `
color: ${props.color};
border: 2px solid ${props.border};
background: ${props.background};
`);
I wonder why it's not listed in official docs
Edited
  • reply
  • like

November 18, 2020 at 2:56pm
Hi, does someone know some syntax checker, correct css properties etc. for styled-components, maybe there is a plugin for eslint. I know about vscode extension, but it checks only in IDE, i can't check styled-components on CI
  • reply
  • like