Material-ui: How to change borderRadius of textfield variant=outline

[tzehe]

I tried this but without success. I want to change the rounded corners in the outlined textfield.
<TextField name="url" value={this.state.url} InputProps={{ inputProps: { style: { textAlign: 'center', padding: 10, borderRadius: 0 }, }, style: { borderRadius: 0 }, }} variant="outlined" onChange={this.handleChange} />

[nicolasiensen]

The border-radius property is not attributed to the input component, but to a fieldset element that wraps the input.

You can remove this property by overriding the fieldset style with a class:

.TextField-without-border-radius fieldset {
  border-radius: 0;
}

<div className="TextField-without-border-radius">
  <TextField
    name="url"
    variant="outlined"
  />
</div>

You can wrap this logic to your own version of the TextField component and reuse it across your app.

Alternatively, you can override the default theme of Material-UI to remove the border-radius from all components.

[tzehe]

@nicolasiensen thank you for your reply. I could achieve the same with this:

textField: {
    [`& fieldset`]: {
      borderRadius: 0,
    },
}

Thank you!

[felixswift]

Anybody now how to fix the light blue background when the textfield is autofilled?

Example

[voxmatt]

For what it's worth, this is a way to do it using withStyles.

const CustomTextField = withStyles({
  root: {
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderRadius: `4px 0 0 4px`,
      },
    },
  },
})(TextField);

[Tapudp]

If someone is using styled-components then you can do following:

``jsx export const TextFieldWrapper = styled(TextField)
fieldset {
border-radius: 50px;
}
`;
````

[bnbturki]

<TextField
  InputProps={{
    classes: {
      root: classes.input,
    },
  }}
/>;