styled-components: 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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 18 (6 by maintainers)

Most upvoted comments

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;
    }
`;

+72

kitten on Nov 1, 2017

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.

Danilo-Araujo-Silva on Jan 10, 2018

@aeciolevy https://codesandbox.io/s/54q2j9881l

import React from "react";
import styled from "styled-components";
import TextField from "@material-ui/core/TextField";

const StyledTextField = styled(props => (
  <TextField InputProps={{ classes: { root: "root", focused: "focused" } }} {...props} />
))`
  .root.focused:after {
    border-color: green;
  }
`;

function StyledComponents() {
  return <StyledTextField label="Material-UI" />;
}

export default StyledComponents;

capture d ecran 2018-11-07 a 23 02 02

oliviertassinari on Nov 7, 2018

@unutoiul that is something we don’t do, since in styled-components that’d be an anti-pattern. So if you don’t want to migrate straight away, you’d have to keep your CSS Modules (or sth equivalent of course) tooling around.

In styled-components all styling is combined in JS, so this is definitely not a question, of how to make it work with styled-components exclusively.

kitten on Nov 1, 2017

styled-components interoperability with Material-UI is documented under this page: https://material-ui-next.com/guides/interoperability/#styled-components.

oliviertassinari on Feb 6, 2018