diff --git a/src/ChipInput.js b/src/ChipInput.js
index faa9cd4..035e402 100644
--- a/src/ChipInput.js
+++ b/src/ChipInput.js
@@ -13,6 +13,7 @@ import FormHelperText from 'material-ui/Form/FormHelperText'
 import cx from 'classnames'
 
 const styles = (theme) => ({
+  root: {},
   inputRoot: {
     display: 'inline-block',
     marginTop: 0
@@ -99,18 +100,18 @@ const styles = (theme) => ({
       backgroundColor: theme.palette.error.A400,
       transform: 'scaleX(1)' // error is always underlined in red
     }
+  },
+  chip: {
+    margin: '0 8px 8px 0',
+    float: 'left'
   }
 })
 
-const defaultChipStyle = {
-  margin: '0 8px 8px 0',
-  float: 'left'
-}
-
-const defaultChipRenderer = ({ value, text, isFocused, isDisabled, handleClick, handleRequestDelete, defaultStyle }, key) => (
+const defaultChipRenderer = ({ value, text, isFocused, isDisabled, handleClick, handleRequestDelete, className }, key) => (
   <Chip
     key={key}
-    style={{ ...defaultStyle, pointerEvents: isDisabled ? 'none' : undefined, backgroundColor: isFocused ? blue[300] : undefined }}
+    className={className}
+    style={{ pointerEvents: isDisabled ? 'none' : undefined, backgroundColor: isFocused ? blue[300] : undefined }}
     onClick={handleClick}
     onRequestDelete={handleRequestDelete}
     label={text}
@@ -424,7 +425,7 @@ class ChipInput extends React.Component {
       <FormControl
         ref={rootRef}
         fullWidth={fullWidth}
-        className={className}
+        className={cx(className, classes.root)}
         error={error}
         required={required}
         onClick={this.focus}
@@ -464,7 +465,7 @@ class ChipInput extends React.Component {
               isFocused: this.state.focusedChip === i,
               handleClick: () => this.setState({ focusedChip: i }),
               handleRequestDelete: () => this.handleDeleteChip(value, i),
-              defaultStyle: defaultChipStyle
+              className: classes.chip
             }, i)
           })}
           <Input
diff --git a/src/ChipInput.spec.js b/src/ChipInput.spec.js
index 9bd6c9f..4919512 100644
--- a/src/ChipInput.spec.js
+++ b/src/ChipInput.spec.js
@@ -291,11 +291,11 @@ describe('custom chips', () => {
       value: 'a',
       text: 'a',
       chip: 'a',
+      className: expect.any(String),
       isDisabled: false,
       isFocused: false,
       handleClick: expect.any(Function),
-      handleRequestDelete: expect.any(Function),
-      defaultStyle: expect.any(Object)
+      handleRequestDelete: expect.any(Function)
     })
   })
 })
diff --git a/src/__snapshots__/ChipInput.spec.js.snap b/src/__snapshots__/ChipInput.spec.js.snap
index d86b826..408f5ba 100644
--- a/src/__snapshots__/ChipInput.spec.js.snap
+++ b/src/__snapshots__/ChipInput.spec.js.snap
@@ -13,18 +13,20 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
     allowDuplicates={false}
     classes={
       Object {
-        "chipContainer": "ChipInput-chipContainer-3",
-        "disabled": "ChipInput-disabled-10",
-        "error": "ChipInput-error-12",
-        "focused": "ChipInput-focused-9",
-        "helperText": "ChipInput-helperText-7",
-        "inkbar": "ChipInput-inkbar-8",
-        "input": "ChipInput-input-2",
-        "inputRoot": "ChipInput-inputRoot-1",
-        "label": "ChipInput-label-5",
-        "labelShrink": "ChipInput-labelShrink-6",
-        "labeled": "ChipInput-labeled-4",
-        "underline": "ChipInput-underline-11",
+        "chip": "ChipInput-chip-14",
+        "chipContainer": "ChipInput-chipContainer-4",
+        "disabled": "ChipInput-disabled-11",
+        "error": "ChipInput-error-13",
+        "focused": "ChipInput-focused-10",
+        "helperText": "ChipInput-helperText-8",
+        "inkbar": "ChipInput-inkbar-9",
+        "input": "ChipInput-input-3",
+        "inputRoot": "ChipInput-inputRoot-2",
+        "label": "ChipInput-label-6",
+        "labelShrink": "ChipInput-labelShrink-7",
+        "labeled": "ChipInput-labeled-5",
+        "root": "ChipInput-root-1",
+        "underline": "ChipInput-underline-12",
       }
     }
     clearOnBlur={true}
@@ -41,15 +43,17 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
     }
   >
     <withStyles(FormControl)
+      className="ChipInput-root-1"
       onClick={[Function]}
     >
       <FormControl
+        className="ChipInput-root-1"
         classes={
           Object {
-            "fullWidth": "MuiFormControl-fullWidth-16",
-            "marginDense": "MuiFormControl-marginDense-15",
-            "marginNormal": "MuiFormControl-marginNormal-14",
-            "root": "MuiFormControl-root-13",
+            "fullWidth": "MuiFormControl-fullWidth-18",
+            "marginDense": "MuiFormControl-marginDense-17",
+            "marginNormal": "MuiFormControl-marginNormal-16",
+            "root": "MuiFormControl-root-15",
           }
         }
         component="div"
@@ -61,16 +65,17 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
         required={false}
       >
         <div
-          className="MuiFormControl-root-13"
+          className="MuiFormControl-root-15 ChipInput-root-1"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
           required={false}
         >
           <div
-            className="ChipInput-chipContainer-3 ChipInput-inkbar-8 ChipInput-underline-11"
+            className="ChipInput-chipContainer-4 ChipInput-inkbar-9 ChipInput-underline-12"
           >
             <withStyles(Chip)
+              className="ChipInput-chip-14"
               key="0"
               label="foo"
               onClick={[Function]}
@@ -78,22 +83,21 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
               style={
                 Object {
                   "backgroundColor": undefined,
-                  "float": "left",
-                  "margin": "0 8px 8px 0",
                   "pointerEvents": undefined,
                 }
               }
             >
               <Chip
+                className="ChipInput-chip-14"
                 classes={
                   Object {
-                    "avatar": "MuiChip-avatar-20",
-                    "avatarChildren": "MuiChip-avatarChildren-21",
-                    "clickable": "MuiChip-clickable-18",
-                    "deletable": "MuiChip-deletable-19",
-                    "deleteIcon": "MuiChip-deleteIcon-23",
-                    "label": "MuiChip-label-22",
-                    "root": "MuiChip-root-17",
+                    "avatar": "MuiChip-avatar-22",
+                    "avatarChildren": "MuiChip-avatarChildren-23",
+                    "clickable": "MuiChip-clickable-20",
+                    "deletable": "MuiChip-deletable-21",
+                    "deleteIcon": "MuiChip-deleteIcon-25",
+                    "label": "MuiChip-label-24",
+                    "root": "MuiChip-root-19",
                   }
                 }
                 label="foo"
@@ -102,49 +106,45 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
                 style={
                   Object {
                     "backgroundColor": undefined,
-                    "float": "left",
-                    "margin": "0 8px 8px 0",
                     "pointerEvents": undefined,
                   }
                 }
               >
                 <div
-                  className="MuiChip-root-17 MuiChip-clickable-18 MuiChip-deletable-19"
+                  className="MuiChip-root-19 MuiChip-clickable-20 MuiChip-deletable-21 ChipInput-chip-14"
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   role="button"
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "float": "left",
-                      "margin": "0 8px 8px 0",
                       "pointerEvents": undefined,
                     }
                   }
                   tabIndex={0}
                 >
                   <span
-                    className="MuiChip-label-22"
+                    className="MuiChip-label-24"
                   >
                     foo
                   </span>
                   <pure(Cancel)
-                    className="MuiChip-deleteIcon-23"
+                    className="MuiChip-deleteIcon-25"
                     onClick={[Function]}
                   >
                     <Cancel
-                      className="MuiChip-deleteIcon-23"
+                      className="MuiChip-deleteIcon-25"
                       onClick={[Function]}
                     >
                       <withStyles(SvgIcon)
-                        className="MuiChip-deleteIcon-23"
+                        className="MuiChip-deleteIcon-25"
                         onClick={[Function]}
                       >
                         <SvgIcon
-                          className="MuiChip-deleteIcon-23"
+                          className="MuiChip-deleteIcon-25"
                           classes={
                             Object {
-                              "root": "MuiSvgIcon-root-24",
+                              "root": "MuiSvgIcon-root-26",
                             }
                           }
                           onClick={[Function]}
@@ -152,7 +152,7 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            className="MuiSvgIcon-root-24 MuiChip-deleteIcon-23"
+                            className="MuiSvgIcon-root-26 MuiChip-deleteIcon-25"
                             focusable="false"
                             onClick={[Function]}
                             viewBox="0 0 24 24"
@@ -169,6 +169,7 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
               </Chip>
             </withStyles(Chip)>
             <withStyles(Chip)
+              className="ChipInput-chip-14"
               key="1"
               label="bar"
               onClick={[Function]}
@@ -176,22 +177,21 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
               style={
                 Object {
                   "backgroundColor": undefined,
-                  "float": "left",
-                  "margin": "0 8px 8px 0",
                   "pointerEvents": undefined,
                 }
               }
             >
               <Chip
+                className="ChipInput-chip-14"
                 classes={
                   Object {
-                    "avatar": "MuiChip-avatar-20",
-                    "avatarChildren": "MuiChip-avatarChildren-21",
-                    "clickable": "MuiChip-clickable-18",
-                    "deletable": "MuiChip-deletable-19",
-                    "deleteIcon": "MuiChip-deleteIcon-23",
-                    "label": "MuiChip-label-22",
-                    "root": "MuiChip-root-17",
+                    "avatar": "MuiChip-avatar-22",
+                    "avatarChildren": "MuiChip-avatarChildren-23",
+                    "clickable": "MuiChip-clickable-20",
+                    "deletable": "MuiChip-deletable-21",
+                    "deleteIcon": "MuiChip-deleteIcon-25",
+                    "label": "MuiChip-label-24",
+                    "root": "MuiChip-root-19",
                   }
                 }
                 label="bar"
@@ -200,49 +200,45 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
                 style={
                   Object {
                     "backgroundColor": undefined,
-                    "float": "left",
-                    "margin": "0 8px 8px 0",
                     "pointerEvents": undefined,
                   }
                 }
               >
                 <div
-                  className="MuiChip-root-17 MuiChip-clickable-18 MuiChip-deletable-19"
+                  className="MuiChip-root-19 MuiChip-clickable-20 MuiChip-deletable-21 ChipInput-chip-14"
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   role="button"
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "float": "left",
-                      "margin": "0 8px 8px 0",
                       "pointerEvents": undefined,
                     }
                   }
                   tabIndex={0}
                 >
                   <span
-                    className="MuiChip-label-22"
+                    className="MuiChip-label-24"
                   >
                     bar
                   </span>
                   <pure(Cancel)
-                    className="MuiChip-deleteIcon-23"
+                    className="MuiChip-deleteIcon-25"
                     onClick={[Function]}
                   >
                     <Cancel
-                      className="MuiChip-deleteIcon-23"
+                      className="MuiChip-deleteIcon-25"
                       onClick={[Function]}
                     >
                       <withStyles(SvgIcon)
-                        className="MuiChip-deleteIcon-23"
+                        className="MuiChip-deleteIcon-25"
                         onClick={[Function]}
                       >
                         <SvgIcon
-                          className="MuiChip-deleteIcon-23"
+                          className="MuiChip-deleteIcon-25"
                           classes={
                             Object {
-                              "root": "MuiSvgIcon-root-24",
+                              "root": "MuiSvgIcon-root-26",
                             }
                           }
                           onClick={[Function]}
@@ -250,7 +246,7 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            className="MuiSvgIcon-root-24 MuiChip-deleteIcon-23"
+                            className="MuiSvgIcon-root-26 MuiChip-deleteIcon-25"
                             focusable="false"
                             onClick={[Function]}
                             viewBox="0 0 24 24"
@@ -269,8 +265,8 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
             <withStyles(Input)
               classes={
                 Object {
-                  "input": "ChipInput-input-2",
-                  "root": "ChipInput-inputRoot-1",
+                  "input": "ChipInput-input-3",
+                  "root": "ChipInput-inputRoot-2",
                 }
               }
               disableUnderline={true}
@@ -287,21 +283,21 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
               <Input
                 classes={
                   Object {
-                    "disabled": "MuiInput-disabled-31",
-                    "error": "MuiInput-error-28",
-                    "focused": "MuiInput-focused-32",
-                    "formControl": "MuiInput-formControl-26",
-                    "fullWidth": "MuiInput-fullWidth-39",
-                    "inkbar": "MuiInput-inkbar-27",
-                    "input": "MuiInput-input-29 ChipInput-input-2",
-                    "inputDense": "MuiInput-inputDense-30",
-                    "inputDisabled": "MuiInput-inputDisabled-35",
-                    "inputMultiline": "MuiInput-inputMultiline-38",
-                    "inputSearch": "MuiInput-inputSearch-37",
-                    "inputSingleline": "MuiInput-inputSingleline-36",
-                    "multiline": "MuiInput-multiline-34",
-                    "root": "MuiInput-root-25 ChipInput-inputRoot-1",
-                    "underline": "MuiInput-underline-33",
+                    "disabled": "MuiInput-disabled-33",
+                    "error": "MuiInput-error-30",
+                    "focused": "MuiInput-focused-34",
+                    "formControl": "MuiInput-formControl-28",
+                    "fullWidth": "MuiInput-fullWidth-41",
+                    "inkbar": "MuiInput-inkbar-29",
+                    "input": "MuiInput-input-31 ChipInput-input-3",
+                    "inputDense": "MuiInput-inputDense-32",
+                    "inputDisabled": "MuiInput-inputDisabled-37",
+                    "inputMultiline": "MuiInput-inputMultiline-40",
+                    "inputSearch": "MuiInput-inputSearch-39",
+                    "inputSingleline": "MuiInput-inputSingleline-38",
+                    "multiline": "MuiInput-multiline-36",
+                    "root": "MuiInput-root-27 ChipInput-inputRoot-2",
+                    "underline": "MuiInput-underline-35",
                   }
                 }
                 disableUnderline={true}
@@ -319,13 +315,13 @@ exports[`uncontrolled mode matches the snapshot 1`] = `
                 value=""
               >
                 <div
-                  className="MuiInput-root-25 ChipInput-inputRoot-1 MuiInput-formControl-26"
+                  className="MuiInput-root-27 ChipInput-inputRoot-2 MuiInput-formControl-28"
                   onBlur={[Function]}
                   onFocus={[Function]}
                   onKeyPress={[Function]}
                 >
                   <input
-                    className="MuiInput-input-29 ChipInput-input-2 MuiInput-inputSingleline-36"
+                    className="MuiInput-input-31 ChipInput-input-3 MuiInput-inputSingleline-38"
                     disabled={false}
                     onChange={[Function]}
                     onKeyDown={[Function]}
diff --git a/stories/CustomizedChipInput.js b/stories/CustomizedChipInput.js
new file mode 100644
index 0000000..31a0785
--- /dev/null
+++ b/stories/CustomizedChipInput.js
@@ -0,0 +1,43 @@
+import React from 'react'
+import withStyles from 'material-ui/styles/withStyles'
+import ChipInput from '../src/ChipInput'
+
+const styles = {
+  chipInputRoot: {
+    border: '1px solid red',
+    borderRadius: 2
+  },
+  chipInputInput: {
+    textAlign: 'right'
+  },
+  chip: {
+    background: 'linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3)',
+    backgroundSize: '1800% 1800%',
+    animation: 'rainbow 18s ease infinite'
+  },
+  '@keyframes rainbow': {
+    '0%': { backgroundPosition: '0% 82%' },
+    '50%': { backgroundPosition: '100% 19%' },
+    '100%': { backgroundPosition: '0% 82%' }
+  }
+}
+
+class CustomChipInput extends React.Component {
+  render () {
+    const { classes, ...other } = this.props
+
+    return (
+      <ChipInput
+        {...other}
+        classes={{
+          root: classes.chipInputRoot,
+          input: classes.chipInputInput,
+          chip: classes.chip
+        }}
+        defaultValue={['Butterfly', 'Unicorn', 'Rainbow', 'Fairy']}
+      />
+    )
+  }
+}
+
+export default withStyles(styles)(CustomChipInput)
diff --git a/stories/index.js b/stories/index.js
index e344919..629d405 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -6,6 +6,7 @@ import Chip from 'material-ui/Chip'
 // import AutoComplete from 'material-ui/AutoComplete'
 import { green } from 'material-ui/colors'
 import ChipInput from '../src/ChipInput'
+import CustomizedChipInput from './CustomizedChipInput'
 // import ControlledChipInput from './ControlledChipInput'
 // import ClipboardExample from './ClipboardExample'
 
@@ -29,16 +30,9 @@ storiesOf('ChipInput', module)
       fullWidth
     />
   )
-  /*
-  .add('with custom chip container styles', () =>
-    <ChipInput
-      fullWidth
-      onChange={action('onChange')}
-      chipContainerStyle={{ overflow: 'auto', maxHeight: '56px' }}
-      defaultValue={[...Array(100).keys()].map((c) => `Chip ${c}`)}
-    />
+  .add('with custom styles', () =>
+    <CustomizedChipInput />
   )
-  */
   .add('with placeholder', () =>
     <ChipInput
       placeholder='Placeholder'