title: How to change TextField input's focus border using Material-UI theme
body: <p>I'm trying to create my own theme with <code>Material-Ui v.5.4.0</code>. And I faced with problem. I can't change <code>TextField</code> <code>focused</code> border <code>color</code> and <code>width</code>. 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.</p>
  <p>My current theme code:</p>
  <pre><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,
              '&amp;:hover': {
                backgroundColor: blueDark
              }
            }
          },
          //   Transparent button
          {
            props: { variant: 'transparentButton' },
            style: {
              color: blue,
              borderRadius: buttonsBorderRadius,
              textTransform: 'none',
              padding: buttonPadding
  
            }
          }
        ]
      },
      // Inputs
      MuiOutlinedInput: {
        styleOverrides: {
          root: {
            borderRadius: inputBorderRadius,
            '&amp; fieldset': {
              border: `1px solid ${blue}`
            }
          },
          focus: {
            border: `1px solid ${blueDark}`
          }
        }
      }
    }
  })
  
  export default theme
  </code></pre>
  <p>My input code:</p>
  <pre><code>&lt;TextField
                  size='small'
                  variant='outlined'
                  label={t('paslelbimo_data_nuo')}
                  type='date'
                  InputLabelProps={{
                    shrink: true
                  }}
                  fullWidth
                  value={publicationDateFrom}
                  onChange={(e) =&gt; setPublicationDateFrom(e.target.value)}
                /&gt;
  </code></pre>