How to change Text Field focus style in Material-UI?

Question

I am having a Search box like this when focusing:

How to change the colour of its background, border and icon of it? And also the way to modify when not focusing.

My code:

<TextField
    className={classes.searchBarStyle}
    placeholder="Search"
    type="search"
    margin="normal"
    variant="outlined"
    InputProps={{
        startAdornment: (
            <InputAdornment position="start">
                <Search />
            </InputAdornment>
        ),
        classes: {input: classes.input}
    }}
/>

CSS:

searchBarStyle: {
    height: "40px",
    width: "200px",
    margin: "0 0 0 0",
    float: "right",
},
input: {
    color: "white",
    textDecoration: "none",
    '&::placeholder': {
        color: 'white',
        fontWeight: "400"
    }
}

Answer 1

I've same problem too then I found your question and try to solve it by myself. I think this isn't late to answer.

You can use makeStyles from @material-ui/core/styles for example, I create border-color & border-raduis on default, border-color and border-width in focus and Change icon to

import { makeStyles } from '@material-ui/core/styles';
import { TextField } from '@material-ui/core/TextField';
import PersonAddIcon from '@material-ui/icons/PersonAdd';

const useStyles = makeStyles(theme => ({
    searchBarStyle: {
        height: "40px",
        width: "200px",
        margin: "0 0 0 0",
        float: "right",
        "& .MuiOutlinedInput-root": {
            "& fieldset": { 
                borderRadius: "20px",
                borderColor: "#000fff"
            },
        "&.Mui-focused fieldset": {
            borderColor: "#C52328"
            borderWidth: "2px"
        }
    }
}
}))


const CustomTextField = () => {
const classes = useStyles()
return <TextField
    className={classes.searchBarStyle}
    placeholder="Search"
    type="search"
    margin="normal"
    variant="outlined"
    InputProps={{
        startAdornment: (
            <InputAdornment position="start">
                <PersonAddIcon />
            </InputAdornment>
        )
    }}
/>
}

export default CustomTextField;

All of className that I modified can check in Inspect mode in Browser

if you want more information, check this link (Check at Customized Inputs)

TextField React component- Material-UI

I hope this answer can help you.