Use className when provided

src/ui/TextField/TextField.stories.js

@@ -4,6 +4,8 @@ import { boolean, number, text } from '@storybook/addon-knobs'
 
 import { TextField } from '.'
 
+import './stories.styles.scss'
+
 export default getConfig(
   { title: 'TextField', component: TextField }
 )
@@ -119,3 +121,12 @@ export function Required () {
     </div>
   )
 }
+
+export function WithClassName () {
+  return (
+    <div>
+      <TextField placeholder='red' className='red' value='className = red' />
+      <TextField placeholder='green' className='green' value='className = green' />
+    </div>
+  )
+}

src/ui/TextField/index.js

@@ -47,6 +47,7 @@ export function TextField ({ type, className, placeholder, required, value, id,
   // Determine what classes the component should have
   const componentClasses = useMemo(() => {
     let classes = 'textfield'
+    if (className) classes += ` ${className}`
     if (type && typeof type === 'string') classes += ` ${type}`
     if (required) classes += ' required-input'
     if (rounded) classes += ' rounded'
@@ -58,7 +59,7 @@ export function TextField ({ type, className, placeholder, required, value, id,
     classes = classes.trim()
 
     return classes
-  }, [hasData, focusState, type, required, rounded, error, alwaysPlaceholder])
+  }, [hasData, focusState, type, required, rounded, error, alwaysPlaceholder, className])
 
   // Determine what classes the input should have
   const inputClasses = useMemo(() => {

src/ui/TextField/stories.styles.scss

@@ -0,0 +1,11 @@
+.textfield {
+  margin-bottom: 15px;
+}
+
+.red {
+  color: red;
+}
+
+.green {
+  color: green;
+}