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
Members
Info

Using react-native object styles alongside css strings

Hey there. I need to use (third party) object styles alongside styled-components' css template literal (+ styling functions). Something like the following example (doesn't work though, style is given precedense over everything) …

thumbsup
0
message-simple
7

Accessing class names generated by styled-components for use in 3rd party…

Is there any way to get access to the class names generated by styled-components? For example, with Glamor, you could do something like: My reason for wanting to do this is that some components (in my case, react-modal), expect an object to passed to their className prop which…

thumbsup
5
message-simple
22

Is it possible detect to styled components in the browser?

I spend a lot of time working with designers to polish up designs, and it's often a tedious process that ends up with a lot of pixel-pushing. I've been thinking it would be great to create some kind of browser plugin that would allow them to select a styled component and view…

thumbsup
0
message-simple
0

Specificity issue when using css className

I've a styled component with some default styles but I'm unable to override these styles using css className. https://styled-components.com/docs/advanced#existing-css I read this thread to fix this issue but I don't want to use any workaround. Actually I'm a library author so…

thumbsup
0
message-simple
4

Using destructuring assignment on props

Hi - I am inheriting some code on a project and I have noticed that original developer used the following syntax with styled components. I can't see any examples of this syntax in the docs but it seems to work and it it avoids repeating ${props => props.theme....} multiple…

thumbsup
0
message-simple
5

Styled components overrides styles from SC library

Hi all! I created a SC react library exporting some components using SC as peer dependency and I'm trying to using it in a create-react-app. So far so good but I've recently have a problem. I imported a component from the library and I'm trying to extend the component from the…

thumbsup
0
message-simple
2

variable font size

hey guys a bit of noob question, styled components is saying that i should put the Text component outside the function. How can i still access the fontsize state after putting it outside the component or is there any way to do it? It will be great if anyone of you have an…

thumbsup
0
message-simple
2

styled-components and bootstrap

I am new to frontend development. I am thinking to create good looking website and would like to reuse bootstrap along with styled component. How can I achieve that? a) Should I use react-bootstrap library along with styled component? How can I do that? OR …

thumbsup
0
message-simple
0

anyone know how to disable editing of styled-component input?

normally the readonly attribute should stop input from being editable. how should it be done with styled-components? do i need to disable make the caret transparent, change the pointer, and disable the onChange function?

thumbsup
0
message-simple
1

SSR concerns when using nth-child and similar selectors

Hi there. I am currently working on a gatsby project using them-ui which uses emotion under the hood. Emotion's SSR has issues like FOUC when using some css selectors (e.g owl selector ( + ), nth-child selector etc) because of the way it performs hydration. Does…

thumbsup
0
message-simple
2