Material-ui: Input element font is incorrect on react-select example

[wijwoj]

• [x ] This is a v3.x issue.
• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The font in the input box should be "Roboto", "Helvetica", "Arial", sans-serif;

Current Behavior

The font on the input box is Arial (in chrome) , MS Shell Dlg 2 (in FF)

Steps to Reproduce

This only seems to be happening on mui v3+

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v3.0.0 |
| React | |
| Browser | |
| TypeScript | |
| etc. | |

[wijwoj]

[wijwoj]

So I don't really understand why this is happening. The input is getting its style from the user agent style sheet rather than picking up any of the other styles. I'm guessing this is something to do with the way react-select puts the components together.

My rather hacky fix is to add the following to the valueContainer style:

'& input': { fontFamily: theme.typography.fontFamily }

[oliviertassinari]

You are correct, the input font comes from the default browser stylesheet. We should make the input inherit the font.

[oliviertassinari]

@wijwoj The following diff can solve the issue. Do you want to update our demo? :)

https://github.com/mui-org/material-ui/blob/dbc38be469c7bc7eb5c5af400857882483a2368a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js#L227-L232

    const selectStyles = {
      input: base => ({
        ...base,
        color: theme.palette.text.primary,
+       '& input': {
+         font: 'inherit',
+       },
      }),
    };

[wijwoj]

@oliviertassinari Yup, will give it a go when I have a moment. Thanks.