What's the best way to use Material UI or any other CSS Frameworks with Styled Components?
It's about how you go on implementing and re-wiring things so that both of these things works smoothly. Do you use any more plugins to help working with this?
What styled-components does under the hood is pass in a className to the RaisedButton. As long as that className is attached to a DOM node somewhere inside the RaisedButton it works perfectly! 🎉 (see the styled-components docs)
Specifically material-ui is a bit of a pain because it uses inline styles and has lots of wrapper divs, but nothing a !important and some nesting here and there can't remedy.
Max Stoiber
The great thing about styled-components is that you don't need to rewire anything to work with third party component libraries. Example:
import styled from 'styled-components'; import { RaisedButton } from 'material-ui'; const StyledButton = styled(RaisedButton)` > button { background: papayawhip !important; color: palevioletred !important; padding: 0 0.75em !important; } `;(live demo)
What styled-components does under the hood is pass in a className to the RaisedButton. As long as that className is attached to a DOM node somewhere inside the RaisedButton it works perfectly! 🎉 (see the styled-components docs)