How to change Error color and underline color on input focus using material-ui v1.0.0-beta.40

Question

I am using Material-UI v1.0.0-beta.40 and I want to change the border color and error text color.

How can this be done?

Answer 1

One of the ways to do it is inside of MuiTheme

import { createMuiTheme } from 'material-ui/styles';
const myTheme = createMuiTheme({
    overrides:{
        MuiInput: {
            underline: {
                    '&:after': {
                      backgroundColor: 'any_color_hex',
                    }
              },
        },
    }
});
export default myTheme;

and then import it into your component and use:

import {MuiThemeProvider} from 'material-ui/styles';
import myTheme from './components/myTheme'

<MuiThemeProvider theme = {myTheme}>
<TextField />
</MuiThemeProvider>

Hope this helps!