时间戳

首页 > 解决方案 > 基于样式的组件库中的主题 [React]

javascript - 基于样式的组件库中的主题 [React]

问题描述

这更像是一个架构问题。目前我有一个组件库，用户可以使用它来构建他们的 UI 应用程序。

该组件库中的样式化组件使用主题为各个组件提供基本结构/样式。

这是组件的示例结构

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

的内容themes.jsx

import colors from theme/colors

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

目前这个结构只支持一个默认的主题文件。但是我需要支持各种主题文件的用例呢？例如，对于 Overlay，产品 1需要默认主题，但对于产品 2，Overlay 具有完全不同的主题定义。

如果个别产品要进口这些组件，最好的方式是什么？您会创建一个基本主题文件，然后为单个产品覆盖吗？

标签： javascriptreactjsthemesstyled-components

解决方案

取决于在第二个主题中需要更改的内容。您可以创建一个全新的主题对象，也可以覆盖特定组件。如果两个主题的差异会随着时间的推移而增长，最后一个选项可能会有点混乱。

这是一个很好的例子，它有 2 个不同的主题，它们的不同之处在于overLay

//themes.js

export const themeA = {
   ...,
  overLay:{
      backgroundColor: "red",
      broderRadius: "10px"
    }
}
export const themeB = {
    ...themeA,
     overLay:{
        backgroundColor: "blue",
        broderRadius: "2px"
    }
};

然后

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

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

推荐阅读