menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-components

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

Channels
Team

styled-components watercooler

November 16, 2017 at 9:01pm
Show previous messages

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

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>
Edited

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

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
hi all, i'm new here, but with Q's, :)
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
Are you receiving any feedback from typescript, or not receiving tooling that you are expecting?
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 instead
Edited
like-fill
1
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

September 20, 2020 at 9:06pm

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
Trying to use background-image: linear-gradient(...) but vendor prefixing doesn't seem to work.

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
like-fill
1

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

January 8, 2021 at 5:16pm
with styled-components I'm wondering if I can send styles as a styled object as a prop to another styled object
like a whole series of styles