Невозможно изменить радиус границы варианта текстового поля = заполнено в Material-ui-core - PullRequest
Новая
       12

Невозможно изменить радиус границы варианта текстового поля = заполнено в Material-ui-core

0 голосов
/ 11 октября 2019

Текущее поведение ?

мой текущий компонент выглядит следующим образом 

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

, и я использую его следующим образом: 

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

, так как вариант = "«не удалось», это не позволяет мне установить радиус границы, я попытался переопределить правило для компонента TextField следующим образом: 

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

, и я использую так, так как это вариант =изложил основные работы 

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

Так, как решить это? Я также попытался добавить значение fieldset в BirthdayTextFields, но это не дает никакого эффекта в основном из-за варианта = "заливка" 

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

Среда

Windows 10

Tech: версия

Material-UI: ^ 3.9.3

Реакция: ^ 16.8.6

Браузер: Chrome

1 Ответ

1 голос
/ 11 октября 2019

Вы пробовали использовать <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

...