为@microsoft/fast-components自定义CSS失败，类型不匹配报错求助

问题场景 #

注册@microsoft/fast-components的Button组件时，直接传入`css``生成的样式对象，代码如下：

provideFASTDesignSystem()
    .register(
        fastButton({ 
            styles: css`
            :host {
              display: flex;
              flex-direction: column;
              align-items: center;
              max-width: 200px;
              padding: 1em;
            }
          
            button {
              min-width: 100px;
              padding: 0.25em;
              margin: 0.5em;
            }
          `
        })
    )

运行时报错：
Type 'ElementStyles' is not assignable to type 'FoundationElementTemplate<ElementStyles, ButtonOptions>'

原因分析 #

fastButton的styles参数要求的是**FoundationElementTemplate<ElementStyles, ButtonOptions>**类型，本质是一个返回ElementStyles的函数，而非直接传入css``生成的ElementStyles`实例。FAST设计成这样是为了支持基于组件配置动态生成样式，因此要求传入模板函数而非静态样式对象。

解决方法 #

将`css``包裹在一个函数中返回即可：

provideFASTDesignSystem()
    .register(
        fastButton({ 
            styles: () => css`
            :host {
              display: flex;
              flex-direction: column;
              align-items: center;
              max-width: 200px;
              padding: 1em;
            }
          
            button {
              min-width: 100px;
              padding: 0.25em;
              margin: 0.5em;
            }
          `
        })
    )

如果需要根据组件配置动态调整样式，还可以在函数中接收上下文参数：

styles: (context, definition) => css`
  :host {
    max-width: ${context.options.customMaxWidth || '200px'};
    padding: ${context.options.padding || '1em'};
  }
`

内容的提问来源于stack exchange，提问作者ummmno