Styled-components-mui NPM

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.