Styled Components MUI

Make writing styled-components with material-ui not suck!

What's the problem?

Material UI is an awesome library, and it's theme abilities are awesome. For custom components, I always turn to Styled Components. Making these work together is a little tedious, having to do something like this:

import styled from 'styled-components';
import { Dialog } from '@material-ui/core';

const DialogStyless = styled(Dialog).attrs({
  classes: { paper: 'DialogStyles' }
})`
  .DialogStyles {
    width: 50vw;
    max-width: 100%;
    margin: 0 0 0 auto;
    height: 100vh;
    max-height: 100vh;
  }
`;

Using styled-components-mui, you can do the following instead:

import styled from 'styled-components-mui';
import { Dialog } from '@material-ui/core';

const DialogStyless = styled(Dialog, { paper: 'DialogStyles' })`
  .DialogStyles {
    width: 50vw;
    max-width: 100%;
    margin: 0 0 0 auto;
    height: 100vh;
    max-height: 100vh;
  }
`;

Here's another example, where we aren't passing custom classes. The difference from regular styled is that all of your styles get wrapped in && { }, which makes them more specific than MUI's styles.

import styled from 'styled-components-mui';
import { Button } from '@material-ui/core';

const StyledButton = styled(Dialog)`
  background-color: palevioletred;
`;

And one more, where we're passing a root class as a string.

import styled from 'styled-components-mui';
import { Table } from '@material-ui/core';

const StyledTable = styled(Table, 'MyTableClass')`
  .MyTableClass {
    background-color: palevioletred;
  }
`;

styled-components-mui is a wrapper around the styled function from styled components. You can pass an object of classes as the second parameter. We also wrap the styles in && { } as recommended by the material-ui "working with styled components" as an easy way to make sure your styles are applied without having to fight with insertion points.

Contributors

Thanks goes to these wonderful people (emoji key):

Henry Kaufman 💻 🤔	Kevin McKernan 💻 📖 🤔 🚇

This project follows the all-contributors specification. Contributions of any kind welcome!