Material UI/Styled Components Style Guide

by: Leeland Clenista

How to use Styled Components with Material UI Components

1. Use the styled() method from Styled-Components to style your Material UI components

import styled, { css } from 'styled-components'
import Button from '@material-ui/core/Button';
export default styled(Button)``;

2. Prioritize the CSS rules of your styled-components over those of the JSS with &&

import styled, { css } from 'styled-components'
import Button from '@material-ui/core/Button';
export default styled(Button)`
//ampersand character makes sure that styled-component styles override JSS styles
  && {
    color: #FF000
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.18), 0 4px 8px 0 rgba(0, 0, 0, 0.15);
  }
`;

3. Dynamically style your components while avoiding warnings related to DOM attributes

import React from 'react'
import styled, { css } from 'styled-components'
import Button from '@material-ui/core/Button';
export default styled(({ color, ...otherProps }) => <Button {...otherProps} />)`
  color: ${props => props.color};
`;

4. Style children of Material UI components

import React from 'react'
import styled, { css } from 'styled-components'
import Button from '@material-ui/core/Button';
export default styled(({ color, ...otherProps }) => <Button {...otherProps} />)`
  color: ${props => props.color};
  & .label {
    font-size: 14px;
  }
`;

Colors

Typography

Buttons

Forms