CSS не применяется, когда mat-extension-panel-header находится в дочернем компоненте

У меня есть компонент, который использует MatExpansionPanel для отображения списка продуктов.

Я использую CSS, чтобы скрыть переполнение описания продукта. Пожалуйста, смотрите этот stackblitz для текущего просмотра.

Итак, я пытаюсь извлечь заголовок панели в дочерний компонент и применить к нему тот же самый CSS. Однако CSS, похоже, не работает. Пожалуйста, смотрите этот stackblitz.

Я что-то не так делаю? Или этот компонент Angular Material реализован таким образом, что его не следует разделять на разные компоненты?

css angular angular-material

28.09.2018 15:08

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

913

Ответы 1

Вы можете заключить свой product-panel-header.component между div с помощью display: flex следующим образом:

html:

<div class = "panel-header">
  <mat-panel-title>
    {{product.noProduit}}
  </mat-panel-title>
  <mat-panel-description class = "product-name">
    {{product.designation}}
  </mat-panel-description>
  <mat-panel-description>
    {{product.quantite}}(+{{product.supplement}})
  </mat-panel-description>
</div>

css: