Блог

Главная - Вопросы по программированию - Наследование модулей CSS между родительскими и дочерними компонентами React

Наследование модулей CSS между родительскими и дочерними компонентами React

#javascript #html #css #reactjs

Вопрос:

Я использую CSS-сетку в родительском компоненте React и пытаюсь предоставить Дочернему компоненту полный контроль над сеткой ячеек, размещенной родителем.

Я добился некоторого успеха на сервере разработки узлов, заставив ребенка импортировать CSS-модуль родителя и добавить его собственный стиль (см. Ниже). Проблема в том, что я не знаю, насколько устойчива эта схема к различным развертываниям или является ли она передовой практикой. Более конкретно:

  1. Будет ли этот метод работать с различными стратегиями компиляции производства ( SPA или SSR )?
  2. Будет ли это работать, если я использую функции искажения имен модулей CSS и должен ли я это делать? (Т. Е.: import parent from './App.css' ... classNAme={parent.App-work}

Родительский компонент

Приложение.css

 .App-container {
  display: grid;
  text-align: center;
  grid-template-columns: 200px  minmax(200px, 1fr);
  grid-template-rows: 100px 1fr;
  row-gap: 20px;
  align-items: start;
}

.App-work{
  grid-column: 2;
  grid-row: 2;
}

App.js

 import './App.css';

...
return(
<div className="App-container">
    <Child>
</div>
);

Родительский компонент

Ребенок.css

 .App-work{
  align-self: center;
}

Child.js

 import './Child.css';
import './App.css';

...
return(
<div className="App-work Child-work">
    ...
</div>
);
Метки: