使用CSS和ReactJS和Redux将CSS添加到1页

Question

I am using ReactJS with redux. I using scss. lets say my path is: http://localhost:3000/login I need to add to this page: html:{ overflow:hidden}

and on other pages i want to remove this attribute.

Anyone have a clue?

Answer 1

I don't know how is your project architecture, but you can add a class (className) into your HTML tag in differently ways.

If you want, you can also use your redux state. You check if you are in X page, if it's ok, pass a boolean at true and if it's true, put your css.

I prefer the first solution.

Answer 2

You can change the style attribute of the html tag:

class MyPage extends React.Component {

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

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

  ...
}

Answer 3

You could just import a className, let's say loginStyle , and make it so:

html: { overflow: hidden; }

Then, you just put it as a condition let's say on your header (has to be an element present in every page).

Something like

const isLogin = window.location.pathname === login ? true : false const isLogin = window.location.pathname === login ? true : false ( <= this is not the real condition, but make it so isLogin equals true is you are on your login page).

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

And your style will only be applied on your login page. Maybe not the simpliest, but at least this would work :)