Material-ui: styling with styled-components doesn't work

[unutoiul]

Styled-components doesn't work with Material UI

I'm trying to style material-ui component using styled components and doesn't work

Example of code:

import Button from 'material-ui/Button';
const StyledButton = styled(Button)`
    background: red;
    border: 1px solid red;
    font-size: 2rem;
    font-weight: bold;
`;

class ButtonTemplate extends Component {
    render() {
        return(
            <div>
                <StyledButton />
            </div>
        )
    }
}

I get only the normal styling of material UI button...what's is the issue?

Thanks,
Lucas

[tfuqua]

I'm guessing this is a result of the precedence of the CSS rules? I saw similar behavior trying to use glamorous with material-ui

[dispix]

I am having a similar problem and is indeed caused by what @tfuqua pointed out. Any idea on how to solve this ?

Edit: this section of the documentation solves the issue.

[tfuqua]

A pattern I found helpful is to create a wrapper component with styled-components or glamorous and have the selector target the child material-ui component

const ButtonWrapper = glamorous.div({ '& button': { color: '#FFF', background: 'red' } });

[dispix]

Just edited my previous comment, there is a section in the documentation to handle the order of the css.

[mbrookes]

https://github.com/callemall/material-ui/issues/8940#issuecomment-342838300

[oliviertassinari]

@mbrookes If you don't mind, I will reopen this issue. I have been encouraging adding a documentation section about how to handle this issue here https://github.com/paypal/glamorous/issues/354#issuecomment-341970253. I wish we could do the same for styled-components. It's important :).

[fuzzthink]

Is there a way to do this as simple (or almost as simple) as what @unutoiul desired? It will make things much very nicer.

[mbrookes]

https://material-ui-next.com/guides/interoperability/#styled-components

[tfuqua]

By changing the JSS-insertion-point I'm able to easily override the material-ui styles using glamorous. I'm assuming styled components works the same way

[fuzzthink]

@mbrookes Thanks. It doesn't seem to work on AppBar https://codesandbox.io/s/2v02o9kjrp

[mbrookes]

@fuzzthink Your example seems to work fine:

[fuzzthink]

@mbrookes Thanks! See it working. Maybe it didn't update for me at first.