Hinzufügen css zu 1 Seite mit scss und ReactJS und redux

Question

Ich benutze ReactJS mit Redux. Ich benutze scss. können sagen, mein Weg ist: http://localhost:3000/login ich auf dieser Seite hinzufügen müssen: html: {overflow: hidden}

und auf anderen Seiten möchte ich dieses Attribut entfernen.

Wer hat eine Ahnung?

Answer 1

können Sie das Stil-Attribut ändern Tages des html:

class MyPage extends React.Component { 

    componentWillMount() { 
    this.htmlTag = document.getElementsByTagName('html')[0]; 
    this.htmlTag.setAttribute('style', 'overflow: hidden'); 
    } 

    componentWillUnmount() { 
    this.htmlTag.setAttribute('style', ''); 
    } 

    ... 
} 

Answer 2

Ich weiß nicht, wie ist Ihre Projektarchitektur, aber Sie können eine Klasse (Klassenname) in Ihrem HTML-Tag auf unterschiedliche Weise hinzufügen.

Wenn Sie möchten, können Sie auch Ihren Redux-Status verwenden. Sie überprüfen, ob Sie in X-Seite sind, wenn es in Ordnung ist, übergeben Sie einen Booleschen Wert an wahr und wenn es wahr ist, legen Sie Ihren CSS.

Ich bevorzuge die erste Lösung.

Answer 3

Sie könnten nur einen Klassennamen importieren, lassen sie loginStyle sagen, und machen es so:

html: { overflow: hidden; }

Dann Sie Stellen Sie es einfach als eine Bedingung, sagen wir auf Ihrem Header (muss ein Element auf jeder Seite sein).

So etwas wie

const isLogin = window.location.pathname === login ? true : false (< = Dies ist nicht der wirkliche Zustand, sondern macht es so gleich isLogin wahr ist, dass Sie auf Ihrer Login-Seite) sind.

<Header className={ $ {className1} $ {className2} $ {isLogin? loginStyle: ''} }/>

Und Ihr Stil wird nur auf Ihrer Anmeldeseite angewendet werden. Vielleicht nicht die einfachste, aber zumindest würde das funktionieren :)