Twilio flex 2.0 主题

Question

如何在 Twilio flex 2.0 中配置自定义主题？

我尝试将自定义主题设置为 Flex 1.0，但在将 Flex 1.0 迁移到 2.0 后它不再起作用

import { VERSION } from '@twilio/flex-ui';
import { FlexPlugin } from '@twilio/flex-plugin';
import { ConnectorHelper } from './helpers/ConnectorHelper';
import ConnectorColorTheme from './theme/ConnectorColorTheme';
import reducers, { namespace } from './states';
import { StylesProvider, createGenerateClassName } from '@material-ui/core/styles';

const PLUGIN_NAME = 'ConnectorPlugin';

export default class ConnectorPlugin extends FlexPlugin {
  constructor() {
    super(PLUGIN_NAME);
  }

  async init(flex, manager) {

    const configuration = {
      colorTheme: ConnectorColorTheme
    };

    // apply theme
   manager.updateConfig(configuration);
   }
 }

export default {
    baseName: "FlexLight",
    colors: {
        base0: "#000000",
        base1: "#222222",
        base2: "#444444"
    },
    overrides: {
        MainHeader: {
            Container: {
                background: "#2f5771",
                color: "#ffffff"
            }
        },
        MainHeaderProfile: {
            marginRight: "1.25rem",
            width: "40px",
            height: "40px",
        },
        mainContainer: {
            width: "290px"
          },
        SideNav: {
            Container: {
                background: "#4a4e60"
            },
            Button: {
                background: "#4a4e60"
            },
        }
    }
}

上面的代码在 Flex 1.0 中运行良好，但现在我无法自定义我的主题。

Answer 1

嗨，是的，我注意到了同样的问题，发生的事情是在升级 twilio 中重新设计了主题的完成方式。随着他们转移到自己的样式库：Twilio paste，他们想让它更一致。

他们已重命名属性：

• 颜色主题 -> 主题
• 覆盖 -> componentThemeOverride

新的主题结构促进了一致性、定制化和 Web 可访问性。有关配置和属性更改的列表，请参阅Theme and Branding。

完整的变化列表这里