Question

这更多是一个体系结构问题。目前，我有一个组件库，用户可以用来构建其UI应用程序。

此组件库中的样式化组件正在使用主题为各个组件提供基础结构/样式。

这是组件的示例结构

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

themes.jsx

的内容

import colors from theme/colors

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

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

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

Answer 1

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

这是一个很好的示例，其中包含两个不同的主题，只是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 }>

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

1 个答案: