Can't change border radius of text-field variant=filled in Material-ui-core

Current Behavior 😯

my current component is as follows

export const BirthdayTextFields = styled(TextField)`
  width: 80px;
  margin-right: 10px;
  border-radius: 50px;
`;

and I'm using it as follows:

<BirthdayTextFields
                      id="filled-dense-hidden-label"
                      margin="dense"
                      hiddenLabel
                      variant="filled"
                      placeholder="18"
                      inputProps={{ 'aria-label': 'dense hidden label' }}
                      onChange={this.handleChange('day')}
                    />

since the variant="failed" it doesn't allow me to set the border-radius, I have tried overriding the rule fo TextField Component by following trick:

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

and I'm using like this, since it is variant=outlined the overriding works

<TextFieldWrapper
                  id="outlined-dense"
                  label="Last name"
                  margin="dense"
                  variant="outlined"
                  onChange={this.handleChange('lastName')}
                />

So how to solve this out? I have also try adding the fieldset value to BirthdayTextFields but it doesn't make any effect mostly becaues of the variant="filled"

export const BirthdayTextFields = styled(TextField)`
  width: 80px;
  margin-right: 10px;
  fieldset {
    border-radius: 50px;
  }
`;

Environment

Windows 10

Tech : Version

Material-UI: ^3.9.3

React : ^16.8.6

Browser : Chrome

Solution 1:

Have you tried using <FilledInput> ?

const useStyles = makeStyles(theme => ({
  root: {
    borderRadius: "50px 50px 0 0"
  },
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1)
  }
}));

export default function FilledTextFields() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    name: "Cat in the Hat",
    age: "",
    multiline: "Controlled",
    currency: "EUR"
  });

  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

  return (
    <form className={classes.container} noValidate autoComplete="off">
      <FilledInput
        id="filled-name"
        label="Name"
        className={classes.textField}
        value={values.name}
        onChange={handleChange("name")}
        margin="normal"
        variant="filled"
        classes={{
          root: classes.root
        }}
      />
    </form>

https://codesandbox.io/embed/material-demo-sos7s

Solution 2:

I wasn't able to access the outline container which applies the borderRadius, so I used the CSS approach instead.

<TextField className="inputRounded" placeholder="Search" variant="outlined" />

Then I addeded the the borderRadius code in the index.css file of the project.

.inputRounded .MuiOutlinedInput-root{
   border-radius: 50px;
}

Solution 3:

const useStyles = makeStyles({
   root: {
      [`& fieldset`]: {
            borderRadius: 15,
      },
   },
});

<TextField
  className={classes.root}
  id="inputRounded"
  label="Email address"
  variant="outlined"
  fullWidth
/>

Solution 4:

You have to use the browser dev tools to identify the slot for the component you want to override. Once that's done, you write a CSS file with the class you want to change.

To force the class you can use :

!important

file : styles.css

.css-1q6at85-MuiInputBase-root-MuiOutlinedInput-root{
    border-radius: 50px!important;
}