使用 style={} 更改 mui 文本字段的边框颜色

Question

我正在尝试将mui的文本字段的边框颜色更改为白色。我可以通过在组件中使用style={}来实现这一点吗？还是必须使用makeStyles？

<TextField

label="Search login"
variant="outlined"
value={searchLogin}
inputProps={{
style: {
color:"white",
},
}}
InputLabelProps={{
style: {
color: "white",
borderColor : "white",
},
}}
onChange={(e) => {
setSearchLogin(e.target.value);
}}
/>

Answer 1

对于那些嵌套元素，您可能无法使用直接样式。尝试以下操作：

import * as React from "react";
import { ThemeProvider } from "@mui/system";
import TextField from "@mui/material/TextField";
import { createTheme } from "@material-ui/core/styles"
const styles = createTheme({
notchedOutline: {
borderWidth: "1px",
borderColor: "white !important"
}
});
export default function Example() {
return (
<ThemeProvider theme={styles}>
<TextField 
label="Search login"
variant="outlined"
value={searchLogin}
onChange={(e) => { setSearchLogin(e.target.value); }}
/>
</ThemeProvider>
);
}