How to style components with CSS in JS?

[Christian Garrovillo]

Based on the Creating Custom Components Docs this should work:

import MuiTextField from '@material-ui/core/TextField'
import { fieldToTextField, TextFieldProps } from 'formik-material-ui'
import { createUseStyles } from 'react-jss'

function StyledTextField(props: TextFieldProps) {
  const styles = useStyles()
  const newProps = { ...props }
  newProps.className = styles.input
  return <MuiTextField {...fieldToTextField(newProps)} />
}

const useStyles = createUseStyles({
  input: {
    color: '#FFF',
  },
})

export default StyledTextField