Как применить стиль к компоненту и всем его потомкам в React/Next.js? ⇐ CSS

[Anonymous]

Предположим, у меня есть проект Next.js/React с одним компонентом верхнего уровня и множеством дочерних и внучатых компонентов. В дочерних компонентах есть элементы div с именами классов, включающими только классы Tailwind (например, className = "flex justify-between" и т. д.). Есть ли способ стилизовать все элементы div, имеющие определенную комбинацию классов Tailwind, содержащихся в компоненте верхнего уровня или в его потомках, без применения стилей глобально или изменения кода для каждого отдельного элемента div?
Это иллюстрация структуры:

Код: Выделить всё

import ChildComponent from './ChildComponent';

export default function ParentComponent() {
return (

Parent Component





);
}

Код: Выделить всё

import GrandChildComponent from './GrandChildComponent';

export default function ChildComponent({ number }) {
return (

Child Component {number}





);
}

Код: Выделить всё

import styles from '../styles/styles.module.css';

export default function GrandChildComponent({ number }) {
return (

Grandchild Component {number}

{/* Bottom-level divs with the same Tailwind classes */}
Item A
Item B
Item C


);
}

По сути, мне нужно стилизовать определенный тип div (их много) на странице, и я пытаюсь найти способ сделать это с наименьшим количеством изменений. базу кода (я не могу переключиться на создание элементов div с использованием .map или forEach и т. д. внутри JSX) и без большого количества ручной работы. В ответе может использоваться совершенно другой подход, чем тот, который подразумевается в вопросе, если в коде и/или циклах JSX не так много изменений.

Подробнее здесь: https://stackoverflow.com/questions/791 ... ct-next-js