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!

[felixmpaulus]

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:

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

[anbturki]

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

[slinkardbrandon]

For anyone trying to accomplish this with the Material UI "styled component API" here's how I did it:

import { TextField } from '@material-ui/core';
import { styled } from '@material-ui/core/styles';

const SearchBox = styled(TextField)(() => ({
  '& fieldset': {
    borderRadius: '25px',
  },
}));

[slinkardbrandon]

Additionally, I thought the text looked like it had a weird placement with the border radius addition so I also added padding to the left:

const SearchBox = styled(TextField)(() => ({
  '& input': {
    paddingLeft: '30px',
  },
  '& fieldset': {
    borderRadius: '30px',
  },
}));

[paulmikulskis]

for anybody looking for another example in a search box with Styled Components:

Style:

const Search = styled(Autocomplete)`
    width: 100%;
    height: 100%;

`;

const StyledTextField = styled(TextField)`
    fieldset {
        border-radius: 17px;
  }
`;

Render:

    return (
        <div>
            <Search 
                renderInput={(params) => <StyledTextField {...params} label="looking for something?" />}
                options={searchOptions}
            />
        </div>
    )

[victcebesp]

Hello guys!

Just found an interesting use case which I think this is not currently covered and as you discussed about this on this issue I wanted to re-open it.

I created a custom TextField component which uses the mui TextField component inside but has some pre-styling for my app:

const StyledTextField = styled(TextField)(({ theme }) => ({
  "& .MuiOutlinedInput-notchedOutline": {
    borderStyle: "solid",
    borderWidth: "2px",
    borderColor: theme.palette.primary.main,
  },
  "& .MuiOutlinedInput-root": {
    height: "37px",
  },
}));

export default function CustomTextField(props) {
  return (
    <StyledTextField
      id={`${props.label}-textfield`}
      style={{
        width: "100%",
        pointerEvents: "fill",
        borderRadius: "4px",
        ...props.style,
      }}
      sx={props.sx}
      size={props.size || "small"}
      disabled={props.disabled}
      label={props.label}
      value={props.value}
      placeholder={props.placeholder}
      InputProps={{
        endAdornment: props.endAdornment && (
          <InputAdornment position="end">{props.endAdornment}</InputAdornment>
        ),

        startAdornment: props.startAdornment && (
          <InputAdornment position="start">
            {props.startAdornment}
          </InputAdornment>
        ),
        readOnly: props.readOnly || false,
      }}
      onChange={props.onChange}
      error={props.error}
      helperText={props.helperText}
      type={props.type}
    />
  );
}

In this case, in order to change the border-radius to the one needed I was doing the following:

const StyledTextField = styled(TextField)(({ theme }) => ({
  "& .MuiOutlinedInput-notchedOutline": {
    borderStyle: "solid",
    borderWidth: "2px",
    borderColor: theme.palette.primary.main,
  },
  "& .MuiOutlinedInput-root": {
    height: "37px",
    borderRaius: "100px",
  },
}));

Note that I added borderRaius: "100px" on the .MuiOutlinedInput-root class.

Now imagine that I want to use my custom TextField component in different parts on my app but I want it to have different border-radius depending on the page. My first thought was to pass the custom radius using the props and that is it. However, this would not work as I cannot access the props from outside the CustomTextField component and I cannot move the creation of the styled version (cannot call the styled method) within the component function as it would lose focus on every user change on the textfield...

One possible solution could be to have the different border radius on the theme but I think this is more kind of a hack than a real solution...

Any clues about how this could be improved?

[slinkardbrandon]

So I had to make updates to my component when we migrated to MUI v5, so for anyone looking for the sx approach that I took, here it is:

    <TextField
      label="Search"
      variant="outlined"
      sx={{
        '& label': { paddingLeft: (theme) => theme.spacing(2) },
        '& input': { paddingLeft: (theme) => theme.spacing(3.5) },
        '& fieldset': {
          paddingLeft: (theme) => theme.spacing(2.5),
          borderRadius: '30px',
        },
      }}

[JamesAsuraA93]

Thanks man you made my day works!! So beatify

[bilalmohib]

So I had to make updates to my component when we migrated to MUI v5, so for anyone looking for the sx approach that I took, here it is:

    <TextField
      label="Search"
      variant="outlined"
      sx={{
        '& label': { paddingLeft: (theme) => theme.spacing(2) },
        '& input': { paddingLeft: (theme) => theme.spacing(3.5) },
        '& fieldset': {
          paddingLeft: (theme) => theme.spacing(2.5),
          borderRadius: '30px',
        },
      }}

Thank you so much

[marciojuniors2]

add this to sx={} in TextField
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'black',
borderRadius: 2,
},
},