Menu
I'm guessing not all UI frameworks are easily used together with styled components; since their specificity could be too high etc.
Am I correct in this regard?
Is there any pattern for styled components that allow them to work with any UI framework?
Is there a pattern to frameworks, that allows them to work really well with styled components, while not being written in it?
I know this could be subjective, but I am trying to ask about an objective pattern for interoperability.
277
Each styled component you make will have a unique class that is listed after the inherited classes of the original object (if there were any). This is important, because of source order — Styled Components (aka you) get the last say in what goes on.
I've worked with different stacks, including WAMP, MERN, and MEAN. My language of choice is JavaScript; frameworks are Angular and Node.js. styled-components came onto the scene with a bang and changed our perspective on how to create inline-styled React components. In this tutorial, we’ll demonstrate how to build your own styled-components.
Theme UI itself doesn’t expose an API for styled components, but works seamlessly with the styled API from the @emotion/styled package. Components written with it should have access to the same theming context that Theme UI uses.
We use the HTML tags in the styled object to create inline-styled components. So we know that the styled object contains HTML tags as properties and they have functions as their value, so styled will look like this: js const styled = { button: function(strings, ...vals) {}, div: function(strings, ...vals) {}, ... }
I'm guessing not all ui frameworks are easily used together with styled components; since their specificity could be too high etc. Am I correct in this regard?
No, styled-components works with any third party component library as long as the components attach the className internally to DOM node. See here the answer of Max Stoiber (co-creator of styled-components) in out of the discussions at GitHub.
There is a binary-ui library, it uses styled-components it works with react and react-native as well.
You can definitely use styled-components with a material-ui library and I guess with many other, I believe most of UI libraries allow using className prop.
97
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
