STYLED MDL

Getting Started

Installation & Setup

Styled MDL is designed to work with React and Styled Components. We will assume you have already setup a project and have a working knowledge of how to use with both React and Styled Components.


First install styled-mdl with npm or yarn

yarn install styled-mdl

Then wherever you bootstrap your app

import React from 'react'
import ReactDOM from 'react-dom'
import { ThemeProvider } from 'styled-components'
import { initGlobals, createTheme, colors } from 'styled-mdl'

// inject global styles
initGlobals()

// create a theme with whatever overrides you want, feel free to add
// your own custom theme options as well, just be careful of naming
// colisions, see theming section for details
const theme = createTheme({
  colorPrimary: colors.indigo[500],
  colorPirmaryDark: colors.indigo[700],
  colorAccent: colors.pink[500],
  myCustomThemeColor: '#f5f5f5',
})

// use generated theme with <ThemeProvider> from styled-components
ReactDom.render((
  <ThemeProvider theme={theme}>
    <AppComponent />
  </ThemeProvider>
), node)

Now you are ready to start using Styled MDL components

Using the Components

All Styled MDL components can be imported into your code from the main package

import { Button } from 'styled-mdl'

<Button type="submit">Submit</Button>

Use a components props to control its look and feel. Check out the components section for details on what props are available on each component

<Button type="submit" raised>Submit</Button>

Or simply extend the components styles for more control

const BigRedButton = Button.extend`
  background-color: red;
  color: white;
  height: 50px;
  font-size: 18px;
  &:hover {
    background-color: darkred;
  }
`

<BigRedButton>PUSH ME</BigRedButton>