!wichtige Inline-Stile in React

Lesezeit: 3 Minuten

Allan Hortle

Es gibt eine Möglichkeit, Inline-Stile mit dem Befehl !important override?

style={
  height: 20+'!important'
};

<div style={style}></div>

Das funktioniert nicht so, wie ich es mir erhofft hatte.

Ja, ich versuche, ein paar gute Übergangsanimationen von Listen zu bekommen. Sie müssen die genaue Höhe kennen, um die reibungsloseste Animation zu erhalten.

– Allan Hortle

22. April 2014 um 1:42 Uhr
Achtung, ich habe herausgefunden, dass das Setzen eines ‘Inline’-Stils mit Reagieren (als Objekt) mit !important wie Sie es dort getan haben, wird es Probleme geben, wenn Sie die Eigenschaft mit einer anderen aktualisieren !important Var. Es wird die erste behalten !important Eigenschaft und nicht aktualisieren …

– TrySpace

25. Juli 2014 um 13:03 Uhr
aktuelles CSS verwenden? Ich kämpfe immer noch damit, dass wir gegen das kämpfen, was natürlich ist, nur um es auf die Reaktionsweise zu tun … aber ich interessiere mich immer noch für diese useRef-Antwort

– Andy

29. Januar 2022 um 0:51 Uhr

Daniel

Anscheinend unterstützt React dies nicht. Aber ich habe diesen Hack bekommen, als ich meine Recherchen gemacht habe

    <div ref={(node) => {
      if (node) {
        node.style.setProperty("float", "right", "important");
      }
    }}>                    
    </div>

Viel Glück:)

wtf mit React macht alle einfachen Aufgaben schwieriger

– Taufik Nur Rahmanda

24. März 2020 um 3:00 Uhr

Räuber

20+'!important' ist '20!important'.

Wenn Sie nur eine Zahl angeben, fügt React “px” für Sie hinzu; aber Sie verwenden eine Zeichenfolge, also müssen Sie die Einheit angeben. Ich bin mir auch ziemlich sicher, dass zwischen “! wichtig” und dem, was links davon steht, ein Leerzeichen sein muss.

style={{ height: '20px !important' }};

Oder nur '20px !important'da keine Zeichenfolgenverkettung erforderlich ist.

– Felix Klinge

15. April 2014 um 5:57 Uhr
In React 0.14.x gearbeitet, aber nicht in React 15.0.0

– rlovtang

8. April 2016 um 11:27 Uhr
Ich versuche dies mit ‘%’ und kein Glück. Ohne das !important flag zumindest sehe ich meinen wert mit durchgestrichen in der konsole.

– Jacksonkr

4. September 2019 um 13:18 Uhr
Es gibt eine offizielle Erklärung auf GitHub, die sie nicht unterstützen !important absichtlich. Diese Antwort kann also nicht funktionieren! Ich teile jedoch nicht die Meinung, dass Sie niemals verwenden sollten !importantwas der Grund dafür ist, dass sie es nicht unterstützen React inline styles. Aber es gibt einen anderen Weg.

– Anarchist912

4. September 2019 um 16:40 Uhr
„Offiziell“ (wie bei einem React-Entwickler, der „wir“ in einem GitHub-Kommentar verwendet) Aussage ist “es wäre teuer, jeden Wert auf !important zu überprüfen, daher ist es nicht großartig, dies zu unterstützen. Selbst wenn wir eine gute Option bekommen, ist es unwahrscheinlich, dass wir dies tun würden, während wir IE8 unterstützen, weil ich nicht gehen möchte Diesen cssText-Pfad herunter. Hier geht es überhaupt nicht um Dogmen, würde ich sagen es geht mehr um Leistung.” Sie wissen, dass es schon mit getan werden kann ref und noch hat niemand einen guten RFC eingereicht, um ihn zu unterstützen, also ist er immer noch nicht verfügbar.

– Formicini

31. Dezember 2021 um 4:08 Uhr

Mario Saraiva

Ein guter Trick, der für andere CSS-Eigenschaften sauberer und konsistenter ist:

ref={(el) => el && el.style.setProperty(<property>, <value>, "important")}

Hoffe das hilft!

Hallo. Sie sollten sich diesen Artikel ansehen, wie Sie Markdown verwenden, um Ihren Code auf SO zu formatieren

– Marcello B.

11. Oktober 2018 um 16:47 Uhr

Nur so konnte ich es mit React 16 zum Laufen bringen.

const id="unique_id"; 
<React.Fragment>
    <style>
      {`
#${id} {
  background-color: transparent !important;
}
      `}
    </style>
    <Frame id={id} />
</React.Fragment>

Anarchist912

Ich empfehle die Verwendung gestylte Komponentenwenn Sie einen guten Grund haben, davon Gebrauch zu machen !importantda die Stil-Requisiten nicht unterstützt werden !important und wahrscheinlich Gewohnheit in der Zukunft.

Hier ist ein Beispiel, wo wir Semantic-UIs überschreiben padding an grid columns. Die kann man eigentlich weglassen !important als “die Spezifität erhöhen” ist ausreichend.

const StyledColumn = styled.div(({size}) => ({className: `${size} wide column`})`
    &&&&& {
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
    }
`
<StyledColumn size="three"></StyledColumn>

&&&&&& <- erhöht die Spezifität.

Dies wurde ursprünglich von Daniel oben beantwortet. Ich möchte nur meine Antwort teilen, während ich seine Antwort so umgestalte, dass sie mit Hooks funktioniert.

Referenz definieren const ref = useRef(null);
Fügen Sie dem gewünschten Knoten eine Referenz hinzu (z. B. div, table) <div ref={ref}></div>
Fügen Sie diesen Code hinzu ref.current.style.setProperty(<property>, <value>, "important") innerhalb useLayoutEffect

Bitte sehen Sie sich die Beispielcodes unten an

import React, { useRef, useLayoutEffect } from "react";


const SampleComponent = () => {

   const ref = useRef(null);

   useLayoutEffect(() => {
    ref.current.style.setProperty("border-top", "0px", "important");
  }, []);

   return (
      <div ref={ref}>
         {/* additional codes here */}
      </div>
   )
}

Notiz:

Eigenschaft ist im CSS-Format (zB “border-top” )

Gary

Ja, der Weg, den ich gefunden habe, um dies zu tun, war der bereits oben erwähnte:

const styles = (theme: any) => ({
    panelSize: {
        height: 480,
        width: 360,
    },
    progress: {
        height: '120px !important', 
        margin: theme.spacing.unit * 2,
        width: '120px !important'
    }
});

14383800cookie-check!wichtige Inline-Stile in React

#Javascript #reagieren