Hallo,
Ich habe versucht, die neuen border-radius-Variablen mit einem Remote-Theme zu überschreiben, aber es scheint, dass die Core :root-Variablen immer Priorität haben. Ich kann diese überschreiben, wenn ich eine Theme-Komponente im Adminbereich erstelle. Gibt es eine Möglichkeit, diese mit einem Theme zu überschreiben? Was übersehe ich? 
Diese winzige Änderung ist so nützlich, vielen Dank! 
Ok, es funktioniert wie erwartet, nur meine Testseite hat mich veräppelt.
Äh, es scheint, das war kein Scherz 
Mit einem Remote-Theme kann ich es nur überschreiben, wenn ich !important verwende.
Wenn ich es so mache 
$border-radius: 2em !important;
:root {
--d-button-border-radius: #{$border-radius};
--d-input-border-radius: #{$border-radius};
}
Wenn ich es stattdessen so versuche
:root {
--d-button-border-radius: 2em;
--d-input-border-radius: 2em;
}
Dann haben die Kernvariablen :root Vorrang.
Was übersehe ich? 
Danke!
Es funktioniert, wenn ich es in einem Theme teste… die Kern-Root wird wie erwartet von der Theme-Root überschrieben.
Können Sie mehr Informationen zeigen? Wo definieren Sie Ihre Root? Wie sieht Ihr Inspektor aus?
Hallo Charlie,
Danke für die Überprüfung
Ich habe versucht, es in scss/custom-variables.scss einzufügen und es in common.scss zu importieren. Und ich habe auch versucht, es direkt in common.scss einzufügen.
Ich habe gerade bemerkt, dass es funktioniert, wenn kein anderer Komponente (im Admin erstellt) dem Theme zugewiesen ist. Wenn ich eine Komponente im Admin mit etwas CSS im gemeinsamen Abschnitt erstelle. Dann überschreibt es für mich nicht die Kern-Root-Variablen.
Es funktioniert, wenn das Theme keine Komponente hat oder die Komponente Common / CSS leer ist.
Wenn ich eine Komponente mit etwas Common / CSS erstelle und sie für das Theme aktiviere.
Dann funktioniert es für mich nicht.
Die d-default-border-radius und d-select-body-border-radius sind benutzerdefiniert.
Danke für die Hilfe!
Verstehe. Sehr interessant. Danke für die klaren Schritte.
Ich werde sehen, was mir einfällt. Im Moment bin ich skeptisch, ob es eine andere Lösung als das !important gibt, das Sie bereits verwenden, aber es wird gut zu wissen sein, wie/warum das so funktioniert.
hmm ja, ich kann das reproduzieren… es ist ein wenig seltsam.
Ich habe ein Remote-Theme und alles, was common.scss enthält, ist:
:root {
--d-border-radius: 100px;
}
Das funktioniert und ich bekomme abgerundete Buttons und andere Elemente:
Sobald ich eine lokale Theme-Komponente hinzufüge, die CSS enthält, funktioniert es nicht mehr. Ich habe eine lokale Theme-Komponente erstellt, die nur Folgendes in common.scss enthält:
body {
background: red;
}
Ich bekomme den roten Hintergrund, aber der border-radius ist weg:
Die gleiche Komponente funktioniert remote einwandfrei. Ich bekomme sowohl den roten Hintergrund als auch die abgerundeten Ränder.
@david/@pmusaraj hat das etwas mit der Reihenfolge zu tun, in der Remote- und lokale Themes kompiliert werden?
Ich glaube, das hat mit unserer magischen Einbindung von variables.scss in jede Theme-CSS-Datei zu tun. Jetzt haben wir das in variables.scss:
:root {
--topic-body-width: #{$topic-body-width};
--topic-body-width-padding: #{$topic-body-width-padding};
--topic-avatar-width: #{$topic-avatar-width};
--d-border-radius: initial;
--d-nav-pill-border-radius: var(--d-border-radius);
--d-button-border-radius: var(--d-border-radius);
--d-input-border-radius: var(--d-border-radius);
}
Und weil wir diese SCSS-Datei in jede Theme- und Plugin-SCSS-Datei einbinden, wird sie immer wieder wiederholt:
Die einzige Möglichkeit, dies derzeit zu überschreiben, besteht darin, die Überschreibung zur letzten Theme-Stylesheet hinzuzufügen, nur dann wird sie zuletzt ausgegeben.
Ich denke, wir müssen diese :root-Deklaration irgendwo global außerhalb von variables.scss im Kern verschieben.
Aha! Vielen Dank, ich habe nie wirklich verstanden, warum diese wiederholt werden, und habe es einfach komplett übersehen.
Ich habe diese in eine andere Datei verschoben, damit sie nicht wiederholt werden, und ich habe bestätigt, dass dies das Problem löst.
