如何使用前端代碼寫出Teams裏的樣式？

在使用Microsoft Teams接入其他系統的時候，當然會碰到一些兼容樣式不統一問題。那這種問題怎麼解決呢？有沒有類似於Office UI Fabric的東東？這樣我們可以接入系統，樣式不成攔路虎。

答案是肯定的，這就是官方提供的React組件，npm package包在這兒：https://www.npmjs.com/package/msteams-ui-components-react。國內的registry也有，淘寶大法好：https://npm.taobao.org/package/msteams-ui-components-react。

用法就不提了，在鏈接裏也都有。使用React的大神比我更清楚，一眼就明白。其中react組件和microsoft teams的javascript sdk配套使用，很強大。

在真正使用之前，大家可能想知道某些組件究竟什麼樣式，自己需要的能不能在這個package裏找到？所以，基於這個問題，

這篇文章就跟大家介紹一下Control library【其實也是App Studio裏的一個功能，很好用。關於App Studio，請戳https://blog.csdn.net/beastboy/article/details/100578648】。

閒言少敘，直接入正題。上圖瞧瞧什麼樣：

可以看到，App Studio裏的這個Control library就是爲界面控件設計而來，有針對這個控件庫的介紹，也有各種控件的樣式展示。

如button：

還有dropdownlist

再比如toggle【每個控件都會有樣式展示，而且可以show出code，很是方便】：

      

class ToggleExample extends React.Component {
  constructor() {
    super();
    this.onToggle = this.onToggle.bind(this);
    this.state = { toggle: false };
  }

  onToggle() {
    this.setState({toggle: !this.state.toggle});
  }

  render() {
    return <TeamsThemeContext.Consumer>
      {(context) => {
        const { rem, font } = context;
        const { sizes, weights } = font;

        const styles = {
          header: {...sizes.title, ...weights.semibold},
          section: {...sizes.title2, marginTop: rem(1.4), marginBottom: rem(1.4)}
        }

        return <Panel>
          <PanelHeader>
            <div style={styles.header}>Toggles</div>
          </PanelHeader>
          <PanelBody>
            <div style={styles.section}></div>
            <Toggle autoFocus checked={this.state.toggle} onToggle={this.onToggle} />
            <Toggle autoFocus disabled checked={this.state.toggle} onToggle={this.onToggle} />
          </PanelBody>
          <PanelFooter>
          </PanelFooter>
        </Panel>;
      }}
    </TeamsThemeContext.Consumer>
  }
}

其他控件也都有code，直接copy過來，非伸手黨，但這確實很方便，拿過來改改，提高效率嗖嗖的~~~~

如果有童鞋想自己寫，也沒問題，直接引用npm包就好。根據個人需要自取。

總之，微軟也是爲這個社區和平臺提供強有力的支持。如果哪些需求暫時沒有官方solution，大家也可以去User Voice【https://microsoftteams.uservoice.com/forums/555103-public】上去提提意見。