React + MUI + TextField

Question

我目前正在尝试更改MUI TextField (文本和边框)的默认颜色。我在官方网站上提到的几种方法都失败了。在我试验过的所有解决方案中，最有希望的是这个：

<TextField InputLabelProps={{ style: { color: 'white' } }} ...>

此解决方案在未编辑时更改文本的颜色。一旦我编辑文本，颜色就会得到它原来的值。我也尝试过这个解决方案，但没有成功：

const theme = createTheme({
  components: {
    MuiTextField: {
      defaultProps: {
        style: { color: 'white'}
      }
    }
  }
});

在应用这个主题之后，我没有做任何改变。有人做过同样的实验吗？致以问候。

Answer 1

​

​

您可以使用MUI调色板：

"primary" | "secondary" | "error" | "info" | "success" | "warning"

<TextField
  color="primary"
/>

这些颜色可以用ThemeProvider覆盖，并用作边框颜色 onFocus。

const getMuiTheme = () =>
  createTheme({
    palette: {
      primary: {
        main: "#FF0000" // red
      },
      secondary: {
        main: "#00FF00" // green
      }
    }
  });


<ThemeProvider theme={getMuiTheme()}>
  <TextField />
  ...
</ThemeProvider>

然后，您可以通过在内部使用sx支柱来处理sx输入颜色。

sx={{
  input: {
    color: getMuiTheme().palette.secondary.main
  }
}}

现场演示

​

​

编辑：如果您希望边框永久着色，无论焦点还是悬停，都可以将其添加到现有的sx支柱中：

sx={{
  input: {
    color: getMuiTheme().palette.secondary.main
  },
  ".MuiOutlinedInput-notchedOutline": {
    borderColor: `${getMuiTheme().palette.secondary.main} !important`
  }
}}

​

​

Answer 2

这个解决方案解决了我的问题：

const color = '#FFF';

const AppTextField = styled(TextField)({
    '& label': {
        color: color,
    },
    '& label.Mui-focused': {
        color: color,
    },
    '& .MuiInput-underline:after': {
        borderBottomColor: color
    },
    '& .MuiOutlinedInput-root': {
        color: color,
        '& fieldset': {
            borderColor: color
        },
        '&:hover fieldset': {
            borderColor: color
        },
        '&.Mui-focused fieldset': {
            borderColor: color
        }
    }
});

谢谢你的帮助。