javascript - 您将如何在特定站点的 React 组件中调用特定的 CSS 样式表？

Question

所以我在一个基于 React 构建的平台上工作，该平台已经具有全局 CSS，它已经以某种方式为所有客户端设置。

通用组名称下的一部分附属公司想要一个新的粘性广告组件，该组件必须稍微更改 CSS，以免页脚被遮盖。

所以通常情况下，我会检查我们的全局变量值是什么，window.client.group，如果是某个组，则通过 javascript 在附属 js 文件(我们的旧通用平台)中添加 css 或 css 样式表。

需要的新 CSS 是:

  @media (max-width:767px){
    #ad201 {width:100%;position:fixed;bottom:0;left:0;z-
index:99999;margin:0;border:1px solid rgb(232, 232, 232);background-
color:#fff;margin: 0 !important;}
    .Footer .container {padding-bottom:50px;}
  }

但是在 React 中，最好和最合适的方法是什么？如您所见，需要进行媒体查询，这很复杂。

我开始使用 group 和 matchMedia，但引入 CSS 的最佳方式是什么？整个样式表？ (stickyAd.css？其他方式？以及如何操作的提示？)

const group = (window.client.group).toLowerCase();
console.log(group);

const mq = window.matchMedia("(max-width: 767px)");

if ((mq.matches) && (group === 'premiere')) {
  // bring in the new css
} else {
  // do nothing
}

多谢指教!

Answer 1

这取决于您对 ad201 和 Footer 的控制程度。

我假设 Footer 是您在 React 中创建的组件。在这种情况下，您可以在检测到您的组时向正在渲染的组件添加一个类似 premiere-footer-fix 的类(您可能会想到一个更好的名称):

render() {
  const group = (window.client.group).toLowerCase();

  return (
    <Footer className={group === 'premiere' ? 'premiere-footer-fix' : ''}/>
  )
}

或者如果您导入非常方便的 classnames 包，

import classNames from 'classnames';

// ...

render() {
  const group = (window.client.group).toLowerCase();
  const classes = classNames({
    'premiere-footer-fix': group === 'premiere'
  });

  return (
    <Footer className={classes}/>
  )
}

然后无论您在何处为页脚声明 CSS，您只需添加如下内容:

@media (max-width:767px) {
    .Footer.premiere-footer-fix .container {
      padding-bottom: 50px;
    }
}

至于您的广告，您必须提供有关如何将其插入页面的更多信息，因为不清楚您对该元素的控制程度。但我会将 premiere 添加到您广告的 classList 并找到插入这段 CSS 的位置:

@media (max-width:767px) {
  #ad201.premiere {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99999;
    margin: 0;
    border: 1px solid rgb(232, 232, 232);
    background-color: #fff;
    margin: 0 !important;
  }
}