在反应项目中隔离css类

Question

我必须归档 bootstrap-iso.css 和 public-iso.css 以及名称为 publicRoute 的组件，它使用 public-iso.css 作为它的基础。但是我在 publicRoute 中有一些部分想要使用 bootstrap-iso，但没有这个 public-iso css。

    const PublicRoute = ({ component: Component, sendMail, ...rest }) => {

    //Some code ...

     return(
    <div className="public-iso">

    //Some code ...
    
    <Route {...rest} component={(props) => (

    //Some code ...

    <Component {...props} />

    //Some code ...

    )}
    
    </div>
)}

而且这个组件有一些只需要 bootstrap-iso 的部分。

const DirectComponent = () =>{

...Some code

return(
<div className="bootstrap-iso">

...some code

</div>

)}

这最终导致了以下情况：

<div className="public-iso">
   ...
   <div className="bootstrap-iso">
      <DirectComponent/>
   </div>
</div> 

而且我知道，我可以将 public-iso 类添加到所有单个组件中，而不是将其添加到整个 PublicRoute 组件中，但这太多余了。那么如何将 DirectComponent 排除在 public-iso 类的范围之外呢？

Answer 1

无法排除，但您可以尝试以这种方式覆盖 css

.public-iso .bootstrap-iso {
  ----
}

因为它将具有更高的优先级。希望对您有所帮助。