Темы в библиотеке компонентов на основе стиля [React]

Question

Это скорее архитектурный вопрос. В настоящее время у меня есть библиотека компонентов, которую пользователь может использовать для создания своего пользовательского интерфейса.

Стилизованные компоненты в этой библиотеке компонентов используют темы, чтобы обеспечить базовую структуру / стилизацию для соответствующих компонентов.

Это пример структуры компонента

src 
  -components
    - Overlay
       - Overlay.jsx
       - stories.jsx
       - themes.jsx

Содержимое themes.jsx

import colors from theme/colors

export
  overLay:{
    default:{
       backgroundColor: "..."
       broderRadius: "..."
       .....
    }
  }

В настоящее время эта структура поддерживает только один файл темы по умолчанию. Но как насчет случая использования, когда мне нужно поддерживать различные файлы темы. Например, с наложением существует product 1 , для которого требуется тема по умолчанию, но для product 2 наложение имеет совершенно другое определение темы.

Как лучше всего это сделать, если отдельные компоненты должны были импортировать эти компоненты? Вы бы пошли о создании файла базовой темы, а затем о переопределениях для отдельного продукта?

Answer 1

В зависимости от того, что нужно изменить во второй теме. Вы можете создать совершенно новый объект темы или переопределить определенные компоненты. Последний вариант может стать немного запутанным, если разница между двумя темами будет увеличиваться со временем.

Вот хороший пример наличия двух разных тем, которые отличаются только с overLay

* 1005. *

затем

import { themeA, themeB } from 'path-to/themes.js`

<ThemeProvider theme={ condition ? themeA : themeB }>