Как расширить или объединить тему «Стилизованные компоненты»

Question

У меня есть библиотека компонентов на основе Styled Components с собственным набором настроек темы, которые по большей части никогда не нужно будет переопределять. Я в процессе перетаскивания этой библиотеки компонентов в другой проект, который также использует компоненты стиля и имеет свою собственную тему. Как я могу импортировать компоненты из библиотеки компонентов и этого проекта и обеспечить, чтобы каждому из них были предоставлены только значения тем из соответствующего репо? Я не хочу переопределять мою тему библиотеки компонентов, я хотел бы управлять двумя отдельными темами, чтобы моя библиотека компонентов имела доступ к теме по умолчанию, и этот другой проект мог определить отдельный объект темы для своих собственных компонентов

Пример: Отдельный проект

const theme = {
  colors: {
    error: '#f23f3f',
  }
}

import { SeparateProjectThemeProvider } from 'separate-proj';

class App extends React.Component {
 render () {
  return (
   <SeparateProjectThemeProvider theme={theme}>
     <h1>Hello</h1>
   </SeparateProjectThemeProvider>
  )
 }
}

Библиотека компонентов

const theme = {
  colors: {
    brand: '#3bbdca',
  }
}

import { ThemeProvider } from "styled-components";

import defaultTheme from "./theme-settings";

const mergeThemes = (theme1, theme2) => {
  const mergedTheme = { ...theme1, ...theme2 };
  return mergedTheme;
};

const CustomThemeProvider = props => {
  const customTheme = {
    custom: Object.assign({}, defaultTheme)
  };

  return (
    <ThemeProvider theme={mergeThemes(customTheme, props.theme)}>
        {props.children}
    </ThemeProvider>
  );
};

export default CustomThemeProvider;

Answer 1

В приведенном ниже коде будет продемонстрировано несколько вариантов - либо предварительная упаковка каждого из ваших компонентов component-lib с соответствующим поставщиком тем (WrappedTitle), либо упаковка по мере их использования (часть «Hello Component World!»).

// Sample component-lib/index.js
import React from 'react';
import styled from "styled-components";
import {ThemeProvider} from "styled-components";

const theme = {
  titleColor: "green"
};
export const CompLibThemeProvider = props => {
  const customTheme = Object.assign({}, theme, props.theme);
  return (
    <ThemeProvider theme={customTheme}>
        {props.children}
    </ThemeProvider>
  );
};

export const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: ${props => props.theme.titleColor};
`;
export const WrappedTitle = (props) => {
  return (<CompLibThemeProvider><Title {...props}/></CompLibThemeProvider>);
};

А вот пример кода проекта:

// App.js
import React from 'react';
import styled from 'styled-components';
import {Title, CompLibThemeProvider, WrappedTitle} from 'component-lib';
import {ThemeProvider} from "styled-components";

const theme = {
  titleColor: "red"
};

export const BigTitle = styled.h1`
  font-size: 5em;
  text-align: center;
  color: ${props => props.theme.titleColor};
`;

const ProjectThemeProvider = props => {

  return (
    <ThemeProvider theme={Object.assign({}, theme, props.theme)}>
        {props.children}
    </ThemeProvider>
  );
};
const App = () => {
  return (
    <>
    <ProjectThemeProvider>
      <>
        <BigTitle>Hello Big World!</BigTitle>
        <WrappedTitle>Hello Pre-wrapped World!</WrappedTitle>
      </>
    </ProjectThemeProvider>
    <CompLibThemeProvider><Title>Hello Component World!</Title></CompLibThemeProvider>
    </>
  );
}

export default App;