ceciliamvrie / styled-material-components

Styled Components implementation of Material Design

Styled Material Components

Styled Components inspired library that implements Material Design for stress free React Application scaffolding.

Table of Contents

0. Inspiration and goals
1. Getting Started
2. Contributing
3. How to use
4. Theme Provider
5. Component Example
6. Decorator Example

Inspiration and goals

1. Styled Components is a great way to couple components with styles.
2. Material Components is the best implementation of material design spec (it is google afterall)
3. We want a native react implementation of the above, and Styled Components gives us that power.
4. Sass Mixins can be mostly written as styled component mixins. See src/mixins/ for examples of this.

Getting Started

• Fork the repo
• Run:

yarn install
yarn run dev

• Open http://localhost:8081 in your browser

Contributing

• Check out our Contributing Guide
• Please follow the Code of Conduct

How to use

The components in this library are Styled Components and have full access to the Style Components v2 api. That means you can call .extend on any of the exported components to modify the styling of everything within the component.

Theme Provider

Similar to the Styled Components ThemeProvider (its a thin wrapper around it) except that it provides a default theme that matches material design's default theme. You can provide a custom theme here with any option from src/theme/defaultTheme.js overwritten. You can nest ThemeProviers just like with StyledComponents to overwrite portions of the theme for sections of your application

Component Example

Button

This component is for creating a material design button. It has props that match the documentation from Material Components

Example Implementation:

// Flat button with primary text color
<Button primary>I’m a Button</Button>

// Flat button with accent text color
<Button accent>I’m a Button</Button>

// Raised button with primary background color
<Button raised primary>I’m a Button</Button>

Decorator Example

withRipple

This is a decorator (higher order component) to add a javascript ripple effect to any element that is a styled component. (it must have the .extend function).

const JSRippleButton = withRipple(Button);
<JSRippleButton raised primary>Test</JSRippleButton>