如何在特定網站的React組件中調用特定的CSS樣式表？

Question

因此，我正在構建一個基於React的平臺，並且該平臺已經具有全局CSS，已經以某種方式爲所有客戶端設置了全局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;} 
    } 

在陣營雖然，什麼是做到這一點的最好和最合適的方法是什麼？ 正如您所看到的，需要參與媒體查詢會很複雜。

我已經開始使用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; 
    } 
}