Material-ui: How to style InputLabel through theme?

[gustavopch]

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

Expected Behavior

theme.typography.caption and theme.typography.body1 should be used for styling InputLabel (the first or the second depending on shrink).

Current Behavior

Defining theme.typography.caption.letterSpacing = '0.04em' doesn't show any effect on a <TextField InputLabelProps={{ shrink: true }} label="Some label" />.

Steps to Reproduce (for bugs)

https://codesandbox.io/s/l78x53665l

1. Create a theme with letterSpacing: '0.04em' for 'caption'
2. Create a TextField with InputLabelProps={{ shrink = true }}
3. See how the theme defined for 'caption' is not applied to the TextField label

Context

I'm trying to adapt material-ui to how my app looked before it.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.36 |
| React | 16.2.0 |
| browser | Google Chrome 64.0.3282.119 |

[oliviertassinari]

theme.typography.caption and theme.typography.body1 should be used for styling InputLabel (the first or the second depending on shrink).

@gustavopch I don't think that we can do that. First, we are transitioning the input label with the scale property. We will lose this capability. Then the specification doesn't ask for body1:

• https://github.com/mui-org/material-ui/blob/895f0e5c9c36a857d757389ff17392c977cb349b/src/Form/FormLabel.js#L10
• https://github.com/mui-org/material-ui/blob/895f0e5c9c36a857d757389ff17392c977cb349b/src/styles/createTypography.js#L98-L99

But more importantly, I'm not sure that sharing code between the two concepts is wise. I can create unexpected side effects. Instead, you can do the following:

const theme = createMuiTheme({
  typography: {
    body1: {
      letterSpacing: "0.4em"
    },
    caption: {
      letterSpacing: "0.4em"
    }
  },
  overrides: {
    MuiFormLabel: {
      root: {
        letterSpacing: "0.4em"
      }
    }
  }
});

https://codesandbox.io/s/68kly0oww

[gustavopch]

@oliviertassinari Thank you. Your suggestion will do it.