Import withStyles directly in components

There was an issue where it caused storybook compilation issues. For more info: storybookjs/storybook#4796

src/Dropdown/Dropdown.jsx

@@ -3,9 +3,9 @@ import FormHelperText from '@material-ui/core/FormHelperText'
 import InputBase from '@material-ui/core/InputBase'
 import React from 'react'
 import Select from '@material-ui/core/Select'
+import withStyles from '@material-ui/core/styles/withStyles'
 
 import FormLabel from '../form/FormLabel'
-import { withStyles } from '../index'
 
 const styles = theme => {
   const light = theme.palette.type === 'light'

src/TextField/TextField.jsx

@@ -3,9 +3,9 @@ import FormHelperText from '@material-ui/core/FormHelperText'
 import InputBase from '@material-ui/core/InputBase'
 import PropTypes from 'prop-types'
 import React from 'react'
+import withStyles from '@material-ui/core/styles/withStyles'
 
 import FormLabel from '../form/FormLabel'
-import { withStyles } from '../index'
 
 const styles = theme => {
   const light = theme.palette.type === 'light'
@@ -51,7 +51,7 @@ const styles = theme => {
  * />
  * ```
  */
-const TextField = ({
+export const TextField = ({
   disabled,
   error,
   fullWidth,

src/TextField/stories/overview.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
 import ComponentOverview from '../../ComponentOverview'
-import { TextField } from '../../index'
+import { TextField } from '../TextField'
 
 export default () => <ComponentOverview component={TextField} />

src/colours/Swatch.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
+import withStyles from '@material-ui/core/styles/withStyles'
 
-import { Paper, Typography, withStyles } from '../index'
+import { Paper, Typography } from '../index'
 
 const size = 120
 const margin = 16

src/dialog/DialogActions.jsx

@@ -1,7 +1,6 @@
 import MaterialDialogActions from '@material-ui/core/DialogActions'
 import React from 'react'
-
-import { withStyles } from '../index'
+import withStyles from '@material-ui/core/styles/withStyles'
 
 const styles = {
   root: {

src/dialog/DialogContent.jsx

@@ -1,7 +1,6 @@
 import MaterialDialogContent from '@material-ui/core/DialogContent'
 import React from 'react'
-
-import { withStyles } from '../index'
+import withStyles from '@material-ui/core/styles/withStyles'
 
 const styles = {
   root: {

src/dialog/DialogTitle.jsx

@@ -1,7 +1,8 @@
 import MaterialDialogTitle from '@material-ui/core/DialogTitle'
 import React from 'react'
+import withStyles from '@material-ui/core/styles/withStyles'
 
-import { Typography, withStyles } from '../index'
+import { Typography } from '../index'
 
 const styles = theme => ({
   root: {

src/form/FormLabel.jsx

@@ -1,6 +1,5 @@
 import FormLabel from '@material-ui/core/FormLabel'
-
-import { withStyles } from '../index'
+import withStyles from '@material-ui/core/styles/withStyles'
 
 const styles = theme => ({
   root: {

src/index.js

@@ -14,9 +14,11 @@ export { default as Grid } from '@material-ui/core/Grid'
 export { default as MenuItem } from '@material-ui/core/MenuItem'
 export { default as Paper } from '@material-ui/core/Paper'
 export { default as Typography } from '@material-ui/core/Typography'
+export { default as withStyles } from '@material-ui/core/styles/withStyles'
+export { default as withTheme } from '@material-ui/core/styles/withTheme'
 
 // Our API.
-export { ThemeProvider, defaultTheme, withStyles, withTheme } from './styles'
+export { ThemeProvider, defaultTheme } from './styles'
 export { default as Button } from './Button'
 export { default as Card } from './card/Card'
 export { default as CardAction } from './card/CardAction'

src/styles/index.js

@@ -1,5 +1,2 @@
-export { default as withStyles } from '@material-ui/core/styles/withStyles'
-export { default as withTheme } from '@material-ui/core/styles/withTheme'
-
 export { default as ThemeProvider } from './ThemeProvider'
 export { default as defaultTheme } from './defaultTheme'