Question

所以我正在开发一个基于React构建的平台，该平台已经拥有了已经以某种方式为所有客户设置的全局CSS。

通用群组名称下的关联企业子集需要一个新的粘性广告组件，必须稍微更改CSS，以便不会覆盖页脚。

通常情况下，我会检查我们的全局变量值是什么，window.client.group，如果它是某个组，请通过javascript在affiliate 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

这取决于您对try: import pygame import pygame.camera import pygame.surfarray import numpy import os import sys import time except: print("there was an error importing modules...") os.system("espeak 'there, was, an, error, importing, modules'") time.sleep(2) class aaiVision(object): def __init__(self,screen,cam,image,imageArr): self.screen = screen self.cam = cam self.image = image self.imageArr = imageArr def startUp(self): os.system("espeak 'eh, eh, i, vision, initializing'") pygame.init() pygame.camera.init() time.sleep(1) os.system("espeak 'Vision, initialized'") camList = pygame.camera.list_cameras() print(camList) time.sleep(1) os.system("espeak 'cameras, found, %s'" % str(len(camList))) time.sleep(1) self.screen = pygame.display.set_mode((640,480)) time.sleep(0.5) self.cam = pygame.camera.Camera("/dev/video0",(640,480),"YUV") time.sleep(0.5) self.cam.start() os.system("espeak 'eh, eh, i, vision, online'") def cameraSee(self): while True: self.cam.query_image() self.image = self.cam.get_image() self.imageArr = pygame.surfarray.array3d(self.image) pygame.surfarray.blit_array(self.screen,self.imageArr) os.system("clear") pygame.display.update() for event in pygame.event.get(): if event.type == pygame.QUIT: sys.exit() eyesAwake = aaiVision('', '', '', '') if __name__ == "__main__": eyesAwake.startUp() eyesAwake.cameraSee()和ad201的控制程度。

我假设Footer是你在React中创建的一个组件。在这种情况下，您可以在检测到组时向正在呈现的组件添加类似Footer的类（您可能会想到一个更好的名称）：

premiere-footer-fix

或者如果您导入非常方便的render() { const group = (window.client.group).toLowerCase(); return ( <Footer className={group === 'premiere' ? 'premiere-footer-fix' : ''}/> ) }包，

classnames

然后，无论您为页脚声明CSS，只需添加以下内容：

import classNames from 'classnames';

// ...

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

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

至于您的广告，您必须提供有关如何将其插入页面的更多信息，因为您不清楚您对该元素的控制程度。但我会在您的广告@media (max-width:767px) { .Footer.premiere-footer-fix .container { padding-bottom: 50px; } }中添加premiere并找到插入此CSS的地方：

classList

您如何在特定网站上的React组件中调用特定的CSS样式表？

1 个答案: