# Wie !important CSS-Eigenschaft per ExtJS überschreiben?

**URL:** <https://forum.shopware.com/t/wie-important-css-eigenschaft-per-extjs-uberschreiben/47626>\
**Category:** Programmierung\
**Created:** [16. August 2017 um 17:28 UTC](https://forum.shopware.com/t/wie-important-css-eigenschaft-per-extjs-uberschreiben/47626 "2017-08-16T17:28:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Netzcoder](https://avatars.discourse-cdn.com/v4/letter/n/278dde/32.png) [@Netzcoder](https://forum.shopware.com/u/Netzcoder)\
**Post date:** [16. August 2017 um 17:28 UTC](https://forum.shopware.com/t/wie-important-css-eigenschaft-per-extjs-uberschreiben/47626/1 "2017-08-16T17:28:26Z")

</div>

Tach, Leude!

Ich schreibe gerade ein Backend-Plugin und möchte die Höhe einer Komponente (ein Button) zur Laufzeit ändern. Der Komponente wird über das Stylesheet ext-all.css eine Höhe mit dem !important-Keyword zugewiesen.

Versuche ich, die vom Stylesheet vorgegebene Höhe per ExtJS zu überschreiben, indem ich bei der Stylezuweisung (z.B. mit der setHeight-Methode) ebenfalls das !important-Keyword verwende, wird die Änderung nicht vom System übernommen. Lasse ich das !important-Keyword weg, wird der Inline-Style angewendet, aber natürlich vom Stylesheet-Wert überschrieben.

Als Workaround binde ich ein zusätzliches Stylesheet ein, das den height-Wert mittels auto !important zurücksetzt, sodass ich bei der Stylezuweisung über ExtJS auf das !important-Keyword verzichten kann. Sicherlich keine ideale Lösung. 😉

Wie kann ich denn eine !important CSS-Eigenschaft per ExtJS überschreiben?

---

<div class="post-metadata">

**Author:** ![MariusMeiners](https://avatars.discourse-cdn.com/v4/letter/m/7ba0ec/32.png) [@MariusMeiners](https://forum.shopware.com/u/MariusMeiners)\
**Post date:** [17. August 2017 um 08:56 UTC](https://forum.shopware.com/t/wie-important-css-eigenschaft-per-extjs-uberschreiben/47626/2 "2017-08-17T08:56:52Z")

</div>

Hey,

wie ich dein Problem verstehe brauchst du dafür kein extjs, das funktioniert auch ganz simple mit normalem javascript.&nbsp;

document.getElementById(„myH1“).style.color&nbsp;=&nbsp;„red!important“;

das erzeugt ja einen inline style, welcher den Wert vom Stylesheet überschreiben sollte.

---

<div class="post-metadata">

**Author:** ![ABC9](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@ABC9](https://forum.shopware.com/u/ABC9)\
**Post date:** [17. August 2017 um 13:31 UTC](https://forum.shopware.com/t/wie-important-css-eigenschaft-per-extjs-uberschreiben/47626/3 "2017-08-17T13:31:26Z")

</div>

!important sollte man nicht verwenden wer das verwendet der gehört erschossen.

---

<div class="post-metadata">

**Author:** ![Netzcoder](https://avatars.discourse-cdn.com/v4/letter/n/278dde/32.png) [@Netzcoder](https://forum.shopware.com/u/Netzcoder)\
**Post date:** [17. August 2017 um 16:54 UTC](https://forum.shopware.com/t/wie-important-css-eigenschaft-per-extjs-uberschreiben/47626/4 "2017-08-17T16:54:41Z")

</div>

> [@MariusMeiners schrieb:](https://forum.shopware.com/profile/27049/MariusMeiners "MariusMeiners")
> 
> wie ich dein Problem verstehe brauchst du dafür kein extjs, das funktioniert auch ganz simple mit normalem javascript.

Danke für den Tipp! Das hatte ich auch versucht.

Das Problem ist nicht, dass ich unbedingt ExtJS verwenden möchte, um die CSS-Eigenschaft zu überschreiben. Das Problem ist, dass der JS-Code nicht wie notiert im Frontend landet; z.B. werden vor dem Einlesen des View-Codes die Tabulatoren entfernt.

Ich vermute, dass Shopware den JS-Code auch in darauffolgenden Verarbeitungsschritten „durch den Wolf dreht“, bevor das JavaScript auf das DOM angewendet wird. Und bei diesen Verarbeitungsschritten fliegt wohl das !important-Keyword raus.

Das ist aber nur eine Theorie. Ich habe mich noch nicht sondernlich mit den Innereien von Shopware befasst.