изменить встроенный атрибут CSS

Question

У меня есть компонент, который я наследую (включая его стиль css), и я хотел бы изменить один из его атрибутов

Это текущий CSS:

.captcha-main-image {
    width: 100%;
    height: auto;
}

<img class ="captcha-main-image" id="captchaImage" src="">

Я хотел бы изменить значение ширины. Этот элемент генерируется из другого источника, и я не могу попросить разработчика изменить его значение. Есть ли шанс, что я могу сделать это, используя !important как-нибудь?

Answer 1

Из-за изоляции Angular вы можете переопределить ее, только если вы поместите переопределения в основную таблицу стилей приложения.

В стилях вашего приложения. css, это основной файл css вашего приложения - тот, который упомянут в agular. json, добавьте переопределение:

.captcha-main-image {
   width: <your-value>
}

Как правило, !important не требуется. Используйте его только при необходимости.

Answer 2

Если вы хотите переопределить класс внутри компонента, поможет добавление !important Или если вы хотите переопределить css вне этого компонента, используйте ::ng-deep .captcha-main-image.

Answer 3

Вы можете добавить класс с атрибутом max-width, чтобы ограничить ширину, например:

.captcha-main-image {
   max-width: 100px;
}