Изоляция css классов в проекте React - PullRequest
Новая
       40

Изоляция css классов в проекте React

0 голосов
/ 13 июля 2020

У меня есть файлы bootstrap -iso. css и publi c -iso. css и компонент имени publicRoute, который использует publi c -iso. css в качестве основы. Однако у меня есть некоторые части в publicRoute, которые хотят использовать bootstrap -iso, но без этого publi c -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>

И я знаю, что вместо этого я мог бы просто добавить класс publi c -iso ко всем отдельным компонентам добавить его ко всему компоненту PublicRoute, но это было бы слишком избыточно. Итак, как я могу исключить DirectComponent из диапазона publi c -iso class?

1 Ответ

1 голос
/ 13 июля 2020

Исключение невозможно, но вы можете попробовать переопределить css таким образом 

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

, поскольку он будет иметь более высокий приоритет. Надеюсь, это поможет.

...