Блог

Главная - Вопросы по программированию - Материал-пользовательский интерфейс: Как удалить преобразование метки ввода?

Материал-пользовательский интерфейс: Как удалить преобразование метки ввода?

#reactjs #material-ui

Вопрос:

Пытаясь удалить какое-либо преобразование по умолчанию InputLabel внутри a FormControl , я задаюсь вопросом, есть ли способ удалить его вместо того, чтобы переопределять каждое свойство по одному?

например, следующее работает, но должно указывать переопределяющие значения и оставляет другие значения по умолчанию:

 createMuiTheme({
    overrides: {
        MuiInputLabel: {
            formControl: {
                position: "unset",
                transform: "none"

Я ищу способ полностью удалить свойства:

 createMuiTheme({
    overrides: {
        MuiInputLabel: {
            formControl: {} <-- as in nothing in formControl, but this does not work

Можно ли это сделать?

Ответ №1:

Вы можете установить shrink значение false в InputLabelProps , чтобы удалить преобразование входной метки при редактировании.

 <TextField InputLabelProps={{ shrink: false }} />

Но проблема в том, что если у вас есть какое-либо значение, оно будет перекрываться с меткой, так как преобразования нет. Решение состоит в том, чтобы удалить метку, если значение не пустое:

 function App() {
  const [value, setValue] = useState("");

  return (
    <TextField
      variant="outlined"
      label={value ? " " : "my label"}
      InputLabelProps={{ shrink: false }}
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

Живая демонстрация

Редактировать маленькие крючки-1866k

Комментарии:

1. Спасибо. Но это не то, о чем я спрашивал. То, как я сделал это в вопросе, приведет к тому, что метка останется вверху слева (для этого вы можете установить значение shrink равным true), но у нее не будет преобразования с уменьшением масштаба (размер 0,75), т. Е. Я хочу, чтобы моя метка имела правильный размер шрифта. И я спрашиваю, можете ли вы удалить преобразование, не переопределяя его.

2. @user1589188 вам нужно использовать transform translate метку вверху, из-за того, как работает преобразование css, вы не можете удалить scale (уменьшить размер шрифта), не удалив translate или не переопределив translate снова. Так что ответ-нет.

3. @NearHuscarlasrl это именно мой вопрос. Я показал , что это работает, переопределив: transform: "none" , Я хочу знать, можно ли это сделать, удалив предварительно заданное преобразование с помощью material-ui? Не в CSS в частности, а в большей степени в материале-пользовательском интерфейсе, чтобы предотвратить его предварительную настройку преобразования или способ переназначения пустого объекта {} классу стиля

4.@user1589188 Боюсь, что вы не сможете. Свойство вызывается overrides по какой-то причине, вы можете переопределить существующий CSS своим собственным. Но стиль по умолчанию создается при запуске, поэтому вы не можете остановить или «отменить» его.

Метки: