Styled-components doesn't work with Material UI

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

[kitten]

There’s a guide here: https://www.styled-components.com/docs/advanced#existing-css

Also, you can try to increase the specificity of your SC CSS:

import Button from 'material-ui/Button';

const StyledButton = styled(Button)`
    && {
    background: red;
    border: 1px solid red;
    font-size: 2rem;
    font-weight: bold;
    }
`;

[Danilo-Araujo-Silva]

Looks like we have 3 ways (could be easier, but not everything is flowers) to override Material UI styles with Styled Components. Here is my Gist.