如何使用前端代码写出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】上去提提意见。