Material-ui: Change default TextField and Input colors to grey or black

[christinavoudouris]

That's all for my request. I doubt anyone wants to get stuck with a default dark blue unless it matches their design scheme. It is a lot of work trying to figure out how to change the color. I am still digging through your docs.

Honestly, I use Materialize CSS a lot more just because Material-UI is overwhelming. And I know React!

Thanks :)

[eps1lon]

Please follow the issue template (current behavior, expected behavior, possibly a codesandbox). Why do you think the current color is not a good default? Is this primarily a docs issue with how to change the color?

[christinavoudouris]

Sorry - I understand wanting to stick to the template. Everything works as expected.

I think the default form input color should change to match most people's designs. And the only colors that would work universally are gray or black. (I use a lot of a red and black in my designs so the blue doesn't match, for example.)

I understand not wanting to use green or red since they are used for validation. Blue is not a bad choice, but it also looks very much like a "default" - much like blue HTML links.

I did figure out how to change the colors but it was a fair amount of styling. I think the docs could be condensed, and should highlight best practices (if any). I'd work on a PR but I'm working on a site right now.

Just thought I'd open up the discussion :)

[oliviertassinari]

I think the default form input color should change to match most people's designs.

@christinavoudouris Have you tried to change the primary color or secondary color at the theme level?

I did figure out how to change the colors but it was a fair amount of styling.

Could you share this code? It would help us understand what you are truly hoping for.

I use Materialize CSS a lot more just because Material-UI is overwhelming. And I know React!

Is there anything that makes it simpler or easier with Materialize?

---

What do you think of #21861?

[christinavoudouris]

I didn't try to change the primary color. It seemed like too much work for just adding a contact form to a page I already designed myself.

This is styling I ended up using. The TextFields are black instead of blue.

const useStyles = makeStyles(theme => ({
        root: {
            '& .MuiTextField-root': {
                margin: theme.spacing(1),
                width: '25ch'
            },
            '& label.Mui-focused': {
                color: 'black',
            },
            '& .MuiInput-underline:after': {
                borderBottomColor: 'black',
            },
            '& .MuiOutlinedInput-root': {
                '& fieldset': {
                    borderColor: 'black',
                },
                '&:hover fieldset': {
                    borderColor: 'black',
                },
                '&.Mui-focused fieldset': {
                    borderColor: 'black',
                },
            },
        },
    }))

Materialize has a simpler solution but it's also a CSS framework.

I saw that prior issue, but to me this solution is very simple. Forms are complex enough and I don't think we need extraneous code for changing a default color that most people will want to change unless it happens to match. You have default gray for the buttons, why not default black or gray for the form inputs?

[eps1lon]

I think the default form input color should change to match most people's designs

What is "most people's design"? What I'm trying to say is that you sound like this is something obvious we should change but "default design" doesn't exist.

You have default gray for the buttons, why not default black or gray for the form inputs?

We no longer do in v5. We default to the primary color just like TextField.

[christinavoudouris]

I never used those terms you're quoting. And that's exactly my point: what is most people's design? Not everyone's website colors will match that blue. But gray or black are neutral colors.

I don't feel like repeating myself. It is obvious, and it's a design issue I felt was worth bringing up. I'll let others chime in and agree if they want.

[tomByrer]

@christinavoudouris MUI tends to go by Google's Material as a spec sheet. Conformity to their text field would make a better argument.

But I do see an alternative global style sheet that is less Google-y better (opinionated) UX would be helpful!
Let me know if you come up with something you shared.

[vizardkill]

The salvageable thing from this discussion would be, if there is a wider color palette than just the default 3.

For example we could have a component of colors that can be adjusted to certain components without the need to alter the whole theme

what do you think? @oliviertassinari @eps1lon

[christinavoudouris]

I understand sticking to the Google spec.

Building on the last comment, and as a broader point, what's great about Materialize is they specifically show a solution to alter the colors of only the Text Field component. The whole point of components is being able to use them independently and change the color to whatever you want with no fuss.

From a practical standpoint, Materialize is much more user-friendly and flexible. They are also based on Google's Material Design.

[oliviertassinari]

Materialize has a simpler solution but it's also a CSS framework.

@christinavoudouris Looking at their demo, I would argue that it's simpler with MUI, there are 5 CSS selector to identify with us, Materialize has 6.

Now, I see two ways we can improve it.

1. We can add a customization demo with the global CSS selectors on the text field page. We only have such demo on the global selectors part of the documentation. It seems to be a good opportunity, at least for illustration purposes.
2. We can wait for #13875

[vizardkill]

@oliviertassinari
If I think we'll have to wait for # 13875, it could be very similar to this example:

https://mdbootstrap.com/docs/jquery/components/buttons/

[oliviertassinari]

My bad, we already have a demo in https://material-ui.com/components/text-fields/#customized-inputs