使用 scss 和 ReactJS 和 redux 将 css 添加到 1 页答案

【问题标题】：Add css to 1 page using scss and ReactJS and redux使用 scss 和 ReactJS 和 redux 将 css 添加到 1 页
【发布时间】：2017-12-07 19:47:07
【问题描述】：

我正在使用带有 redux 的 ReactJS。我使用scss。可以说我的路径是： http://localhost:3000/login 我需要添加到此页面： html:{溢出：隐藏}

在其他页面上我想删除这个属性。

有人知道吗？

【问题讨论】：

标签： css html reactjs sass redux

【解决方案1】：

我不知道您的项目架构如何，但您可以通过不同的方式将类 (className) 添加到 HTML 标记中。

如果你愿意，你也可以使用你的 redux 状态。你检查你是否在 X 页面，如果没问题，在 true 处传递一个布尔值，如果是 true，则放入你的 css。

我更喜欢第一种解决方案。

【讨论】：

Luke Vella 在我的回答下澄清了答案 =)

【解决方案2】：

你可以改变html标签的style属性：

class MyPage extends React.Component {

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

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

  ...
}

【讨论】：

【解决方案3】：

你可以只导入一个类名，比如loginStyle，然后这样：

html: { overflow: hidden; }

然后，您只需将其作为条件放在标题上（必须是每个页面中都存在的元素）。

有点像

const isLogin = window.location.pathname === login ? true : false（isLogin 等于 true）。

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

而且您的样式只会应用于您的登录页面。也许不是最简单的，但至少这是可行的:)

【讨论】：