如何找到哪个 Material UI 默认主题标签会更改默认边框颜色（不是焦点或悬停边框）？答案

【问题标题】：How do I find which Material UI default theme label will change the default border color (not focus or hover border)?如何找到哪个 Material UI 默认主题标签会更改默认边框颜色（不是焦点或悬停边框）？
【发布时间】：2021-11-21 03:03:56
【问题描述】：

我目前正在使用“createTheme”从 Material UI 自定义我的 TextField 输入的主题。

为了进行更改，我正在查看 https://mui.com/customization/default-theme/ 上的 Material UI 默认主题并更改相应的标签。

我想更改 TextField 的默认边框 - 当 TextField 上没有悬停或焦点时出现的边框。边框目前是灰色的

有谁知道哪个默认主题标签指的是该边框？好像没找到

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

标签： css reactjs material-ui

【解决方案1】：

在文本字段中使用内联样式。 <TextField style={{ border:"1px solid color name", }}/>

【讨论】：

嘿，感谢您的回复，但这似乎只是在现有 TextField 边框周围添加了另一个边框
它将覆盖默认边框。

【解决方案2】：

我在主布局上使用它：

   const useStyles = makeStyles(() => (
    {
        root: {

                "& .css-h5voop-MuiInputBase-root-MuiInput-root:before": {
            borderBottom:" 1px solid rgb(215 50 50 / 70%)",
                },

     }
     })

【讨论】：

【解决方案3】：

这是一个好方法，您可以使用 !important 来确保它有效

const theme = createTheme({

 components: {
    MuiInputBase: {
      styleOverrides: {
        root: {
          "&:before":{
            borderBottom:"1px solid yellow ",}
        },
      },
    },
  },

})

【讨论】：