如何使用Material-UI主题更改TextField输入的焦点边框

Question

我正在尝试使用 Material-Ui v.5.4.0 创建自己的主题，但遇到了问题。我无法更改 TextField 的 focused 边框 颜色 和 宽度。我花了几个小时进行研究，但没有找到可行的解决方案。我开始思考在主题中是否可能做到这一点，但这是不合逻辑的。

我的当前主题代码：

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

我的输入代码：

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

- Romanas

Answer 1

由于我无法确定您对焦点和非焦点状态所需的确切效果，因此我决定创建一个通用示例，带有过度夸张的样式，可能对您修改为符合您需求有用:

基本上，我只是针对焦点和非焦点状态覆盖了.MuiOutlinedInput-notchedOutline：

const theme = createTheme({
  components: {
    // Inputs
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          ...
          "& .MuiOutlinedInput-notchedOutline": {
            border: `5px solid green`,
          },
          "&.Mui-focused": {
            "& .MuiOutlinedInput-notchedOutline": {
              border: `5px dotted red`,
            },
          }
        },
      }
    }
  }
});

CodeSandbox的工作示例：https://codesandbox.io/s/customstyles-material-demo-forked-uri26?file=/theme.js:84-531

- Steve Gomez

---

@Romanas 这是否接近于您想要做的事情？ - Steve Gomez

是的，那正是我在寻找的！谢谢@Steve Gomez。 - Romanas

@SteveGomez 再次感谢！我已经寻找这个解决方案很长时间了。太棒了。 - James