Change border color of mui's textfield using style={}-CodePudding

I'm trying to change the color to border of mui's textfield to white. Can I do this somehow by using style={} in component or do I have to use 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);
                }}
              />

CodePudding user response：

For those nested element you likely won't be able to use direct styling. Try following:

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>
  );
}