'How to change TextField input's focus border using Material-UI theme

I'm trying to create my own theme with Material-Ui v.5.4.0. And I faced with problem. I can't change TextField focused border color and width. I spend hours for research and didn't find working solution. And I started to think is it even possible to do that in theme? But it's not logical.

My current theme code:

import { createTheme } from '@mui/material/styles'

// Colors
const blue = '#5A5BD4'
const blueDark = '#4f4fd8'

// Parameters
const buttonsBorderRadius = 20
const buttonPadding = '5px 15px'
const inputBorderRadius = 10

const theme = createTheme({
  components: {
    // Buttons
    MuiButton: {
      variants: [
        //   Blue button
        {
          props: { variant: 'blueButton' },
          style: {
            backgroundColor: blue,
            color: '#ffffff',
            borderRadius: buttonsBorderRadius,
            textTransform: 'none',
            padding: buttonPadding,
            '&:hover': {
              backgroundColor: blueDark
            }
          }
        },
        //   Transparent button
        {
          props: { variant: 'transparentButton' },
          style: {
            color: blue,
            borderRadius: buttonsBorderRadius,
            textTransform: 'none',
            padding: buttonPadding

          }
        }
      ]
    },
    // Inputs
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          borderRadius: inputBorderRadius,
          '& fieldset': {
            border: `1px solid ${blue}`
          }
        },
        focus: {
          border: `1px solid ${blueDark}`
        }
      }
    }
  }
})

export default theme

My input code:

<TextField
                size='small'
                variant='outlined'
                label={t('paslelbimo_data_nuo')}
                type='date'
                InputLabelProps={{
                  shrink: true
                }}
                fullWidth
                value={publicationDateFrom}
                onChange={(e) => setPublicationDateFrom(e.target.value)}
              />


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source