Angular 15 Ошибка ввода материала при фокусе при использовании Tailwindcss

Перед фокусировкой:

После фокусировки:

Проблема:

При использовании angular mat v. 15 и последней версии tailwindcss возникает ошибка при фокусировке поля ввода.

Чтобы воспроизвести проблему:

ng new angular-test
cd angular-test
ng add @angular/material
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Хвостовой ветер.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Стили.scss

[...]

/* You can add global styles to this file, and also import other style files */

@tailwind base;
@tailwind components;
@tailwind utilities;

App.component.html

<mat-form-field appearance = "outline">
  <mat-label>Favorite food</mat-label>
  <input matInput placeholder = "Ex. Pizza" value = "Sushi">
</mat-form-field>

Любые идеи, как решить проблему?

Для развертывания Сайтов с использованием Blazor, Angular и React с репозиторием на GitHub на Cloudflare.
Для развертывания Сайтов с использованием Blazor, Angular и React с репозиторием на GitHub на Cloudflare.
Как развернуть сайты с помощью Blazor, Angular и React с репозиторием на GitHub на Cloudflare.
Шаблоны Angular PrimeNg
Шаблоны Angular PrimeNg
Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной...
Promise и Observables в Angular
Promise и Observables в Angular
Здесь мы рассмотрим основные различия между обещаниями и наблюдаемыми таблицами на примере.
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Разработка Drupal и AngularJS: Идеальное сочетание для вашей веб-стратегии
Разработка Drupal и AngularJS: Идеальное сочетание для вашей веб-стратегии
Один опытный веб-разработчик назвал комбинацию Drupal и AngularJS "сочетанием, созданным на небесах". Почему так? Потому что вместе они могут создать...
Создание многостраничной формы заявления о приеме на работу с помощью Angular
Создание многостраничной формы заявления о приеме на работу с помощью Angular
Наличие на корпоративном сайте форм заявлений о приеме на работу, или "трудовых анкет", экономит время и деньги как для соискателей, так и для...
6
0
333
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попутный ветер добавляет стиль границы: сплошной; что вызывает визуализацию дополнительной границы

Быстрым решением было бы переопределить правильный стиль границы

Добавьте это в файл styles.css

.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
  border-right-style: hidden;
}

Кажется, это работает для границы, однако для заполнения проблема все еще существует stackoverflow.com/questions/74621735/…

San Jaisy 14.12.2022 08:37

Другие вопросы по теме