在 React 项目中隔离 css 类

Question

我必须归档 bootstrap-iso.css 和 public-iso.css 以及使用 public- 的名称 publicRoute 的组件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 class 添加到所有单个组件，而不是将其添加到整个 PublicRoute 组件，但这太多余了。那么如何从 public-iso class 的范围中排除 DirectComponent？

Answer 1

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

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

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

在 React 项目中隔离 css 类

Isolating css classes in react project

javascript

css

frontend

less

reactjs