Change the color of under-bottom line of textboxes

[webcluster4u]

Version

latest

Reproduction link

https://www.creative-tim.com/product/material-kit-pro-react

Operating System

Windows

Device

Windows

Browser & Version

Chrome (latest)

Steps to reproduce

Hi,

I am working on LOG-IN page and there is a CustomInput component, and I would like to know how to change the color of under-line of the textbox (which is an Input materil-ui componet)?

I have tried with ThemeProvider wraping the CustomInput but with no luck

const theme = createMuiTheme({
palette: {
  primary: {
    main: green[500],
  },
  secondary: {
    main:  green[500],
  },
},
});

.....

</ThemeProvider theme={theme}>
                    <CustomInput
                      id="first"
                      formControlProps={{
                        fullWidth: true
                      }}
                      inputProps={{
                        onChange: e => change1(e),
                        placeholder: "First Name...",
                        type: "text",
                        startAdornment: (
                          <InputAdornment position="start">
                            <Face className={classes.inputIconsColor} />
                          </InputAdornment>
                        )
                      }}
                      InputLabelProps={{
  className: classes.cssLabels
}}
                    />
</ThemeProvider>

I have couple of questions:
1- How to change the under-line color of textboxes in LOG-IN page or across whole pages and website
2- How to change the color of primary and secondary palettes across whole pages?
Regards,
Mahdi

What is expected?

Changing the color of textboxes in whole pages

What is actually happening?

I have tried several ways but with no luck

---

Solution

Additional comments

[einazare]

Hello there, @Bazarganigilani ,

I do not know why, but Github never notified me about your issue.
Do you still need help with this?

Best,
Manu