Material-ui: [TextField] Outline has Inline Styles

[tylervick]

Using the TextField component with the variant prop set to "outlined" will inline a padding-left and width inline style. This is difficult to accommodate for Content Security Policy.

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

Expected Behavior

All styles provided by material-ui should be inlined in the head tag which contains a CSP nonce

Current Behavior

When implementing TextField, the following HTML is output - note the style attributes

<fieldset aria-hidden="true" class="MuiNotchedOutline-root-174 MuiOutlinedInput-notchedOutline-151" style="padding-left: 8px;">
    <legend class="MuiNotchedOutline-legend-175" style="width: 38px;"></legend>
</fieldset>

Steps to Reproduce

Link: https://codesandbox.io/s/31prwv9j5q

1. Implement TextField component
2. add variant="outlined"
3. Inspect the fieldset and input elements

Context

This makes implementing a good CSP difficult due to arbitrary inline styles

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v3.2.2 |
| React | v16.5.2 |
| Browser | Chrome 69 |

[oliviertassinari]

@tylervick This is quite a strict security policy! There is a related issue on React side: https://github.com/facebook/react/issues/5878. We could change the approach. I have no object for that. But we might also want to use svg over fieldset in #13297.

[oliviertassinari]

@tylervick Could you tell me more about this requirement?

[AlexCppns]

Any update on this?

[oliviertassinari]

I'm not sure we should fix this issue. We are using inline style at different locations in the code base.
cc @mui-org/core-contributors.

[AlexCppns]

The issue I have in practice with this is a display bug when the TextField changes from hidden to displayed:

It's a display bug that occurs even when I force the label to be sticky:

export const OutlinedTextField: React.FC<any> = ({ ...props }) => {
  const usedProps: any = {
    ...props,
    variant: "outlined"
  };
  return (
    <TextField
      {...usedProps}
      input={{ ...props.input }}
      InputLabelProps={{ shrink: true }}
    />
  );
};

[eps1lon]

I'm not familiar enough with inline styles and CSP. Is this just a concern for inputs or inline styles in general? I think it would require quite a bit of effort for our transition components to remove the inline styles.

[oliviertassinari]

@AlexCppns This is a different issue. The best workaround is to change the key. It's basically the same root cause than: #15142.

[AlexCppns]

@octavioamu it works, thanks.

[octavioamu]

I think you mean @oliviertassinari @AlexCppns :)

[AlexCppns]

ohh :p

[oliviertassinari]

I'm closing as I don't think that we should stop ourselves to use inline style if it can enable better solutions.

Regrading the very case of the text field, #17680 will very likely remove this inline style.