TextField styling issues using ITextFieldStyles interface

[kevinvangelder]

Environment Information

• Package version(s): 7.110.1
• Browser and OS versions: N/A

Please provide a reproduction of the bug in a codepen:

https://codepen.io/kevinvangelder/pen/Baoqovp

Actual behavior:

subComponentStyles.label styles are not applied to the label.

Expected behavior:

subComponentStyles.label styles should be applied to the label.

Priorities and help requested:

Are you willing to submit a PR to fix? Yes

Requested priority: Normal

Products/sites affected: Learn Student Ambassador site

[aneeshack4]

@kevinvangelder Thanks for reaching out to us! I believe there is be a workaround with how you can inject that styling another way - @ecraig12345 might know.

We’re currently focusing on improvements to performance and coherence, as you can see in our pinned issue on the repo detailing our v8 plans. So we may not be able to address this with a fix right now, but we will take it into consideration when we schedule future work for TextField.

[claezon]

I did the following workaround:

const inputStyle = {
    wrapper: {
        selectors: {
            'label': {
                // ...pimp that label
            }
        }
    }
}

[ecraig12345]

Very belatedly coming back to this (sorry). The issue here is that the label sub-component styles are supposed to be (basically) of type ILabelStyles, so the actual styles ned to go under a root property. <TextField styles={{ subComponentStyles: { label: { root: { /*your styles here*/ } } } }} />.

We unfortunately aren't able to express this typing properly in ITextFieldSubComponentStyles.label due to TS bugs. You can work around this and get full type checking/intellisense as follows. (demo: https://codesandbox.io/s/13195-textfield-label-styles-0lz7f)

const labelStyles: Partial<ILabelStyles> = {
  root: {
    backgroundColor: 'orange',
    fontSize: 80
  }
};
const textFieldStyles: Partial<ITextFieldStyles> = {
  subComponentStyles: {
    label: labelStyles
  }
};

// later
<TextField styles={textFieldStyles} ... />