Как лучше всего структурировать стили / настройку компонентов в приложении React с несколькими арендаторами

Question

Я создаю приложение, которое используется несколькими организациями.Каждая организация обращается к приложению в своем собственном поддомене EG google.myapp.com, microsoft.myapp.com.Все они потребляют один и тот же пакет, однако на каждом поддомене не работает отдельная версия.

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

Моя установка - это приложение React, работающее на модифицированной версии create-react-app webpack config.

Я пытаюсь добиться настройки, в которой у каждой организации есть «тема», в основном состоящая из различных переменных SCSS.Эти переменные изменят основные цвета в приложении.

У меня также есть определенные элементы, которые необходимо показать в зависимости от того, какая организация просматривает приложение (элементы navbar и т. Д.).Мне бы хотелось, чтобы в сборке был только соответствующий CSS для каждой организации в комплекте.

Я знаю, что это очень широкий вопрос, но я действительно не знаю, как лучше структурировать это.Любой совет высоко ценится!

Answer 1

В итоге я перенес свое приложение в styled-components и реализовал theme .

Я храню основные переменные для каждого арендатора в объекте темы:

export const themes = {
  tenantOne: {
    primaryOne: COLOURS.wallop,
    primaryTwo: COLOURS.wallop,
    logoBackground: COLOURS.wallop,
    secondaryOne: COLOURS.lostForest,
    secondaryTwo: COLOURS.darkPurp,
    [...]
  },
  tenantTwo: {
    primaryOne: COLOURS.red,
    primaryTwo: COLOURS.orange,
    logoBackground: COLOURS.darkerGrey,
    secondaryOne: COLOURS.darkerGrey,
    secondaryTwo: COLOURS.darkerGrey,
    [...]
  },
};

Затем я завернул свое приложение в компонент <ThemeProvider>, предоставленный styled-components.Я передал функцию в theme prop, которая выясняет, какой арендатор использует приложение (с идентификатором, извлеченным из серверной части), а затем возвращает используемый объект темы.

<ThemeProvider theme={ platformBrandingHelper.getPlatformTheme(appId) }>
    <App />
</ThemeProvider>

Вспомогательная функция:

function getPlatformTheme(appId) {
  switch (appId) {
    case 'tenantOne':
      return THEMES.tenantOne;
    case 'tenantTwo':
      return THEMES.tenantTwo;
    default:
      return THEMES.default;
  }
}

С этого момента это просто пример стилизации вашего приложения с использованием переменных в вашей теме, а не жестких кодирующих цветов.Вот почему я перешел на styled-components

Пример:

const Button = ({
  className,
  type,
  onClick,
  disabled,
  active,
  children,
}) => (
  <button
    disabled={ disabled }
    className={ `${ className } ${ active ? 'active' : '' }` }
    type={ type }
    onClick={ (e) => onClick(e) }
  >
    <span className="content">
      { children }
    </span>
  </button>
);

const StyledButton = styled(Button)`
  border-color: ${ (props) => props.theme.primaryOne };;
  background: ${ (props) => props.theme.primaryOne };;
  color: ${ (props) => props.theme.baseSix };
`;

Теперь приложение будет загружать правильный объект темы для каждого арендатора, тогда каждый компонент будет стилизован с использованием соответствующих цветов и т. Д.потому что все они полагаются на переменные, переданные им из темы.